1. 利用CSS3 :disabled 偽元素定義
//Chrome Firefox Opera Safari
input:disabled{
????border: 1pxsolid#DDD;
????background-color: #F5F5F5;
????color:#ACA899;
}
2. 利用屬性選擇符定義
//IE6failed
input[disabled]{
????border: 1pxsolid#DDD;
????background-color: #F5F5F5;
????color:#ACA899;
}
3. 利用class來定義,為要禁用的input增加一個class
input.disabled{
????border: 1pxsolid#DDD;
????background-color: #F5F5F5;
????color:#ACA899;
}
最終結果:
//Chrome Firefox Opera Safari IE9+
input:disabled{
????border: 1pxsolid#DDD;
????background-color: #F5F5F5;
????color:#ACA899;
}
//IE8-
input[disabled]{
????border: 1pxsolid#DDD;
????background-color: #F5F5F5;
????color:#ACA899;
}
//IE6Using Javascript to add CSS class "disabled"
* html input.disabled{
????border: 1pxsolid#DDD;
????background-color: #F5F5F5;
????color:#ACA899;
}
注意:IE8 bug?
由于IE8 不識別 :disabled 導致input[disabled],input:disabled樣式失效蠢古,可以考慮單獨來寫,或者直接使用input[disabled]。;IE9及以下無法改變字體顏色罚随。