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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 待生如子女,爱心暖融融。 相遇皆为缘,有别亦惜同。 天资有短长,常心待若龙。 两袖清风始,淡泊安乐终。 (又逢一年...
    悠然mafengxian阅读 2,875评论 2 13
  • 1.不要躲避痛苦 曾经失败的经历让我们建起一道心墙保护自己,但躲避痛苦的同时也是躲避了别人对你的爱。 2.不要惧怕...
    把快乐带给你阅读 1,391评论 3 1
  • 女儿一岁多时,爱读书的我想着可以给孩子读点书。刚好有个在悠贝绘本馆工作的邻居推荐了绘本,于是便开始了亲子阅读...
    Lisa和Coco阅读 1,105评论 0 1
  • 她不与我分享那一枝桂花 他也不与我分享一只馒头 桂花在她手中是耀眼的 馒头在他嘴边是耀眼的 此时此刻。我们三个人 ...
    方楠_e203阅读 3,602评论 0 0
  • 今天对于“博弈”这个问题引发了我的思考,我们只要不是一个人,都会有各种的博弈现象出现。我们博弈的原因是为了赢,为了...
    张俊豪阅读 4,406评论 0 2