前军教程网

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;
}