当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 区分只读文本框和普通文本框的背景色

HTML/XHTML教程
XHTML入门学习教程:网页Head和DTD
XHTML入门学习教程:XHTML超级链接
XHTML入门学习教程:列表标签的使用
XHTML入门学习教程:文字格式与特殊字符
XHTML入门学习教程:XHTML标签
XHTML入门学习教程:XHTML常用标签
XHTML入门学习教程:什么是XHTML?
XHTML入门学习教程:简单网页制作
HTML网页的基本组成概述
表格边框的css语法
HTML表格标记教程(48):CSS修饰表格
HTML表格标记教程(46):表格的表尾标记
HTML表格标记教程(47):表格嵌套
HTML表格标记教程(45):表格的表主体标记
HTML表格标记教程(43):表头的垂直对齐属性VALIGN
HTML表格标记教程(44):表格的表首标记
HTML表格标记教程(42):表头的水平对齐属性ALIGN
HTML表格标记教程(40):表头的暗边框色属性BORDERCOLORDARK
HTML表格标记教程(39):表头的亮边框色属性BORDERCOLORLIGHT
HTML表格标记教程(38):表头的边框色属性BORDERCOLOR

HTML/XHTML教程 中的 区分只读文本框和普通文本框的背景色


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 43 ::
收藏到网摘: n/a

        对于文本框,只读状态下和普通状态下,浏览器对其并没有做什么特殊的标记,表面看来,效果是一样的,这样,对用户来说,易用性并不是很高.

        当然,我们可以改变只读文本框的背景颜色来加以区分,这个时候就需要程序员自己判断这个文本框是不是只读,然后再引入相应的css,无疑加大了工作量.

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

<style>
input{background-color:expression((this.readOnly && this.readOnly==true)?"#cccccc":"")}
</style>
<INPUT TYPE="text" NAME="">
<INPUT TYPE="text" NAME="" readonly>
<INPUT TYPE="text" NAME="">
<INPUT TYPE="text" NAME="" readonly>