真实项目中最常用CSS样式（一）——input输入框样式修改

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前端开发中HTML、CSS是页面静态效果实现需要掌握的最基础的知识，如果要全面的学习，每一个都是一本很厚的书，但是从实际项目开发的角度，经过大量项目的开发，特别是大屏可视化类的项目开发，发现最常用的知识点并不多，这个CSS系列就是想从真实项目出发，把最常用的知识点或者代码进行整理，可以用于学习，也可以直接进行运用。

input框有默认的样式，但在实际项目开发中，经常要根据美工的设计图对输入框的样式进行修改，这里介绍了我自己在项目中最常用到的关于input样式修改的代码。

• 修改input框的长、宽、背景颜色、边框、字体、字体、颜色等常用样式。

input {
  width: 100px; // 宽度
  height: 40px; // 高度
  color: #fff; // 输入值的颜色
  font-size: 16px; // 字体大小
  font-family: Arial, Helvetica, sans-serif; // 字体
  background: transparent; // 背景透明
  border: 1px solid #56deff; // 边框颜色
  border-radius: 6px; // 边框圆角
}

• 修改input框选中（聚焦）时的样式，主要是修改选中的边框样式，最常用的是去掉这个边框，这里要注意的是这里说的边框实际是轮廓，所以不是用border去修改，而是用outline来进行修改，如果要去掉默认的样式，将其值设为none即可。

input:focus {
      outline: 1px solid rgba(135, 182, 255, 0.85); 
      // 去除边框
      // outline: none;
 }

• 修改placeholder的样式，比如字体、字体颜色、字体大小等。

input::-webkit-input-placeholder{
     color:#f0f; 
     ... ...
}

• 去除当type=number时出现在右侧的那个上下小箭头。

input::-webkit-outer-spin-button,  
input::-webkit-inner-spin-button {
       -webkit-appearance: none;
}

• 去除chrome浏览器中记住密码后自动填充时出现的背景。

input:-webkit-autofill {
  	-webkit-box-shadow: 0 0 0 1000px white inset !important;
}