浏览器默认输入框样式

Posted 2022-07-04 xiaolanschool

1.输入框获取焦点时，有默认的边框

inputoutline: none;

2.谷歌浏览器自动填充的默认样式，需要用纯色内阴影填充

input:-webkit-autofill
-webkit-box-shadow: 0 0 0 30px #022068 inset;
-webkit-text-fill-color: #fff;

3.输入框提示文字的样式

::-webkit-input-placeholder  /* WebKit browsers */
  color: #ddd;
  font-size: 18px;

:-moz-placeholder  /* Mozilla Firefox 4 to 18 */
  color:#ddd;

::-moz-placeholder  /* Mozilla Firefox 19+ */
  color: #ddd;
  font-size: 18px;

:-ms-input-placeholder  /* Internet Explorer 10+ */
  color: #ddd;
  font-size: 18px;