只读属于一种行为，不是样式（也可以理解为视觉效果），所以不能用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>
典型的不考虑兼容性的 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将图片转换成黑白(灰色、置灰) « 张鑫旭-鑫空间-鑫生活
题主可以看这个
