input默认属性修改

一】去除选中时边框样式 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;
}