一】去除选中时边框样式 outline:none;
input{
background:none;
outline:none;
border:1px solid #ccc;
}
input:focus{
border:none;
}
二】修改光标颜色
1.直接更改字体颜色就可以改变光标颜色
input{
color:red;
}
2.通过 caret-color属性改变光标颜色
input{
caret-color:red;
}
三】修改placeholder默认提示文字颜色、字体大小
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: red;
font-size: 16px;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: red;
font-size: 16px;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: red;
font-size: 16px;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: red;
font-size: 16px;
}
四】input 输入框 在自动填充时,背景颜色问题
1.纯色背景填充(用阴影覆盖)
input:-webkit-autofill {
box-shadow: 0 0 0 1000px #333333 inset;
-webkit-text-fill-color: #fff;
}
2.透明背景填充(背景出现时间加大)
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
-webkit-text-fill-color: #61BFFF;/* 字体颜色 */
transition: background-color 5000s ease-out 0.5s;
}