css统一设置input样式区分input类型.docx
- 文档编号:7161410
- 上传时间:2023-01-21
- 格式:DOCX
- 页数:9
- 大小:17.52KB
css统一设置input样式区分input类型.docx
《css统一设置input样式区分input类型.docx》由会员分享,可在线阅读,更多相关《css统一设置input样式区分input类型.docx(9页珍藏版)》请在冰豆网上搜索。
css统一设置input样式区分input类型
css统一设置input样式(区分input类型)
当你看到这个html标签的时候,你会想到什么?
一个文本框?
一个按钮?
一个单选框?
一个复选框?
……对,对,对,它们都对。
也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的:
所以你可能会说,input真是一个伟大的东西,竟然这么有“搞头”,但是当你真正在项目中试图给不同的控件设置不同的样式时,你就会发现,input真的可以把“你的头搞大”。
我不知道为什么当初要给input赋予那么多身份,但是,他的“N重身份”给网站设计者的确带来了不少的麻烦。
好在,劳动人民是伟大的,解决问题的办法还是有滴~,虽然它们都有各自致命的缺点Orz…解放方法大致归纳一下,列表如下(小弟才疏,错误遗漏难免,还请各位高人指点):
1.用css的expression判断表达式
2.用css中的type选择器
3.用javascript脚本实现
4.如果你用MicrosoftVisualStudio2005或者后续版本开发项目,恭喜,你还可以使用skin。
下面就来讲解一下各个办法的详细实现和它们的优缺点。
1:
用css的expression判断表达式
实现代码参考:
doctypehtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
input
{
background-color:
expression(this.type=="text"?
'#FFC':
'');
}
- Thisisnormaltextbox:
- Thisisnormalbutton: