只读属于一种行为，不是样式（也可以理解为视觉效果），所以不能用css来设置。其实置灰和只读都可以用input本身的属性来设置即可，不需要CSS和JS：
<input type="text" readonly disabled />
利用SVG和滤镜分别实现：
<style type="text/css">img{
-webkit-filter: grayscale(100%)
-moz-filter: grayscale(100%)
-ms-filter: grayscale(100%)
-o-filter: grayscale(100%)
filter: grayscale(100%)
filter: url("data:image/svg+xmlutf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale")
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
}
img:hover{
-webkit-filter: grayscale(0)
-moz-filter: grayscale(0)
-ms-filter: grayscale(0)
-o-filter: grayscale(0)
filter: grayscale(0)
filter: url("data:image/svg+xmlutf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0,0 1 0 0 0,0 0 1 0 0,0 0 0 1 0\'/></filter></svg>#grayscale")
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)
}
</style>
<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 马桶通过别的浏览器我没试过-->
