input置灰,只读css样式？

html-css09

input置灰,只读css样式？,第1张

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

题主可以看这个