CSS巧用expression来区分只读文本框

村子里的鹅

村子里的鹅

2016-02-19 21:32

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的CSS巧用expression来区分只读文本框教程,一起来看看吧!超容易上手~

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

展开更多 50%)
分享

猜你喜欢

CSS巧用expression来区分只读文本框

Web开发
CSS巧用expression来区分只读文本框

区分只读文本框和普通文本框的背景色

电脑网络
区分只读文本框和普通文本框的背景色

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

巧用WPS旋转文本框来制作密封线

wps教程 wps office教程
巧用WPS旋转文本框来制作密封线

巧用WPS文本框制作语文小报

电脑入门
巧用WPS文本框制作语文小报

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

文本框栏目介绍

Web开发
文本框栏目介绍

JQuery 文本框使用小结

Web开发
JQuery 文本框使用小结

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS的学习应该注意学习方法

CSS的学习应该注意学习方法

打字游戏

打字游戏
下拉加载更多内容 ↓