给用户表单输入框聚焦添加一点效果

时间:2020-7-27 作者:admin

前言

这不是一篇正经的文章,但是或许对您有一点用,在做用户输入表单时,不妨加一点效果,让用户输入更嗨…

单个输入框表单聚焦时输入框变化

给用户表单输入框聚焦添加一点效果

具体实现

html 结构代码

<input type="text" placeholder="请输入您的姓名" />

css 代码,当然你使用类选择器也是可以的,这里我使用了 css 的属性选择器 关于选择器的优先级,可自行尝试测试:

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

具体可参考文档css 样式优先级

多个输入框表单聚焦时输入框变化

给用户表单输入框聚焦添加一点效果

具体实例代码如下所示

input[type='text'],
input[type='password'] {
  height: 40px;
  width: 200px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #999;
  text-indent: 20px;
  transition: 0.3;
  outline: none;
}
input[type='text']:hover,
input[type='password']:hover {
  border-color: #42b983;
}

input[type='text']:focus,
input[type='password']:focus {
  border-bottom-color: #f1190d;
}

input[type='password']::-webkit-input-placeholder,
input[type='text']::-webkit-input-placeholder {
  transition: 0.5s;
  font-size: 14px;
  transform-origin: top left;
}
input[type='password']:focus::-webkit-input-placeholder,
input[type='text']:focus::-webkit-input-placeholder {
  transform: scale(0.8) translateY(-10px);
}

分析

实现这一效果,主要在于-webkit-input-placeholder这个伪元素的方式,结合 css中的变换transform,缩小scale,与垂直方向平移

具体关于伪类与伪元素,可见伪类与伪元素

原文出处-表单输入框聚焦效果https://coder.itclan.cn/

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。