input 禁用样式处理 伪元素

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及以下无法改变字体颜色。