只读属于一种行为，不是样式（也可以理解为视觉效果），所以不能用css来设置。其实置灰和只读都可以用input本身的属性来设置即可，不需要CSS和JS：
<input type="text" readonly disabled />
<style type="text/css">div{ padding:5px}
#main{ width:960pxmargin-left:automargin-left:autobackground-color:#fff}
.css_gray {
FILTER: gray
}
</style>
<div id="main">
<div class="css_gray" style="height:200pxwidth:200pxbackground-color:#F00">加灰色滤镜只要class=css_gray,现在是加上的效果</div>
<div style="height:200pxwidth:200pxbackground-color:#F00">加灰色滤镜只要class=css_gray,这是未加的效果</div>
</div>
<!--注意ie6 马桶通过别的浏览器我没试过-->
典型的不考虑兼容性的 css。
给你个兼容全部的吧：（做一次授人鱼）
img{-webkit-filter: grayscale(100%)
-moz-filter: grayscale(100%)
-ms-filter: grayscale(100%)
-o-filter: grayscale(100%)
filter: grayscale(100%)
filter: gray
}
来源于 小tip: 使用CSS将图片转换成黑白(灰色、置灰) « 张鑫旭-鑫空间-鑫生活
题主可以看这个
