修改input输入框样式

首先要将input输入框的默认样式去掉

-web-kit-appearance:none;
  -moz-appearance: none;

然后将input输入框的轮廓去掉：

outline:0;

完成样式

input[type="text"]{
  box-sizing: border-box;
  text-align:center;
  font-size:1.4em;
  height:2.7em;
  border-radius:4px;
  border:1px solid #c8cccf;
  color:#6a6f77;
  -web-kit-appearance:none;
  -moz-appearance: none;
  display:block;
  outline:0;
  padding:0 1em;
  text-decoration:none;
  width:100%;
}

处理自动填充样式为相应样式

input:-internal-autofill-previewed,input:-internal-autofill-selected {
  -webkit-text-fill-color: #FFFFFF !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

设置placeHolder提示样式位置

input::-ms-input-placeholder{text-align: center;}
input::-webkit-input-placeholder{text-align: center;}

 

可以将居中属性替换为定位属性：

input::-webkit-input-placeholder{position：relative；left：20px；}   //此命令有效

 

此外，将居中属性替换成外边距是无效的：

input::-webkit-input-placeholder{margin-left：20px；}   //此命令无效

placeholder颜色

       input::-webkit-input-placeholder{
 2         color:red;
 3     }

 4     input::-moz-placeholder{   /* Mozilla Firefox 19+ */
 5         color:red;
 6     }

 7     input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
 8         color:red;
 9     }

10     input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
11         color:red;
12     }