利用CSS的expression区分只读文本框的实例

发布时间:2020-11-01编辑:脚本学堂
只读文本框和普通文本框在浏览器中区别不大,用户不好分辨,本文就讲一实例来说明如何使用CSS的expression区分只读文本框。大家好好看看文章,希望能给您带来帮助。

文本框只读状态和普通状态,浏览器对它并没有做什么特殊的标记,外表看效果是一样的,这样对用户来讲,不是很方便.
当然,我们可以改变只读文本框的背景颜色来加以区分,这个时候需要技术员自己判断这个文本框是不是只读,然后再引入相应的css,这样使我们工作量大增。

但是在这里,我们使用expression来提供一种解决方案,只需要每个页面引入这个css即可完成,其它的都由程序自己判断。
如下示例:
 

复制代码 代码示例:
<style>
input{background-color:expression((this.readonly && this.readOnly==true)?"#f0f0f0":"")}
</style>
<INPUT TYPE="text" NAME="">
<INPUT TYPE="text" NAME="" readonly>
<INPUT TYPE="text" NAME="">
<INPUT TYPE="text" NAME="" readonly>

 有兴趣的朋友们可以做一页面来试试效果。