脚本宝典收集整理的这篇文章主要介绍了css样式之区分input是按钮还是文本框的方法第1/4页,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
当你看到<input>这个ht
ML标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对。也许你可能想不到,这个小小的input竟然可以
创造出1
0个不同的东西,下面是个列表,看看,
哪些是你没有想到的:
<input ty
PE="text" /> 文本框
<input type="password" /> 密码框
<input type="s
ubm
IT" /> 提交按钮
<input type="reset" /> 重置按钮
<input type="radio" /> 单选框
<input type="checkbox" /> 复选框
<input type="button" /> 普通按钮
<input type="file" /> 文件选择控件
<input type="hidden" /> 隐藏框
<input type="image" /> 图片按钮
所以你可能会说,input真是一个伟大的东西,竟然这么有“搞头”,但是当你真正在项目中试图给不同的控件设置不同的样式时,你就会发现,input真的可以把“你的头搞大”。我不
知道为什么当初要给input赋予那么多身份,但是,他的“N重身份”给网站设计者的确带来了不少的麻烦。好在,劳动人民是伟大的,解决问题的办法还是有滴~,虽然它们都有各自致命的缺点 Orz… 解放方法大致
归纳一下,列表如下(小弟才疏,错误遗漏难免,还请各位高人指点):
1.用css的ex
Pression判断表达式
2.用css中的type选择器
3.用javascript脚本实现
4.如果你
用Microsoft
Visual Studio 2005
或者后续版本开发项目,恭喜,你还可以使用skin。
下面就来
讲解一下各个办法的详细实现和它们的优缺点。
1:用css的exPRession判断表达式实现代码参考:
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html XMlns="http://www.w3.org/1999/xhtml" >
<head>
<title> diffInput2 </title>
<meta name="Author" content="JustinYoung"/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
input
{
background-color:expression(this.type=="text"?'#Ffc':'');
}
</style>
</head>
<body>
<dl>
<dt>This is normal textbox:<dd><input type="text" name="">
<dt>This is normal button:<dd><input type="button" value="i'm button">
</dl>
</body>
</html> 优点:
简单,轻量级
缺点:expression判断表达式FireFox是不支持的。致命的是只能区分出一个(例如例子中就只能区分出text文本框),不要试图设置多个,下面的会将上面的覆盖掉 Orz…
脚本宝典总结
以上是脚本宝典为你收集整理的css样式之区分input是按钮还是文本框的方法第1/4页全部内容,希望文章能够帮你解决css样式之区分input是按钮还是文本框的方法第1/4页所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。