当前位置:主页 > CSS3库 > 表单 >

纯CSS中的浮动输入占位符
栏目分类:表单   发布日期:2021-09-15   浏览次数:

浮点标签模式的纯 CSS 实现,如 Android 和 iOS 中所见。

使用:

1. 将输入字段与占位符一起包装到标签元素中,如下所示:

<label class="custom-field">
  <input type="text" required/>
  <span class="placeholder">动画占位符</span>
</label>

2. 设置自定义输入字段的样式并将占位符移动到该输入字段的顶部。完毕。

.custom-field {
  position: relative;
  font-size: 14px;
  padding-top: 20px;
}
 
.custom-field input {
  border: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none ;
  appearance: none;
  outline: none;
  background-color: #f2f2f2;
  padding: 12px;
  border-radius: 3px;
  width: 250px;
  font-size: 14px;
}
 
.custom-field .placeholder {
  position: absolute;
  left: 12px;
  top: calc(50% + 10px);
  transform: translateY(-50%);
  color: #aaa ;
  transition: 
      top 0.3s ease-in-out,
      font-size 0.3s ease-in-out,
      color 0.3s ease-in-out;
}
 
.custom-field input:valid + .placeholder,
.custom-field input:focus + .placeholder {
  top: 10px;
  font-size: 12px;
  color: #aaa;
}

官方网站:

相关热词: 浮动标签模式

上一篇:CSS扩展搜索框
下一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库