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