css样式之区分input是按钮还是文本框的方法第1/4页
发布时间：2016-12-08 03:27:15 所属栏目：百科 来源：站长网
导读：当你看到lt;inputgt;这个html标签的时候，你会想到什么？一个文本框？一个按钮？一个单选框？一个复选框？……对，对，对，它们都对。也许你可能想不到，这个小小的input竟然可以创造出10个不同的东西，下面是个列表，看看，哪些是你没有想到的： lt;input
|
当你看到lt;inputgt;这个html标签的时候，你会想到什么？一个文本框？一个按钮？一个单选框？一个复选框？……对，对，对，它们都对。也许你可能想不到，这个小小的input竟然可以创造出10个不同的东西，下面是个列表，看看，哪些是你没有想到的： lt;input type="text" /gt; 文本框 lt;input type="password" /gt; 密码框 lt;input type="submit" /gt; 提交按钮 lt;input type="reset" /gt; 重置按钮 lt;input type="radio" /gt; 单选框 lt;input type="checkbox" /gt; 复选框 lt;input type="button" /gt; 普通按钮 lt;input type="file" /gt; 文件选择控件 lt;input type="hidden" /gt; 隐藏框 lt;input type="image" /gt; 图片按钮 所以你可能会说，input真是一个伟大的东西，竟然这么有“搞头”，但是当你真正在项目中试图给不同的控件设置不同的样式时，你就会发现，input真的可以把“你的头搞大”。我不知道为什么当初要给input赋予那么多身份，但是，他的“N重身份”给网站设计者的确带来了不少的麻烦。好在，劳动人民是伟大的，解决问题的办法还是有滴～，虽然它们都有各自致命的缺点 Orz… 解放方法大致归纳一下，列表如下（小弟才疏，错误遗漏难免，还请各位高人指点）： 1.用css的expression判断表达式 2.用css中的type选择器 3.用javascript脚本实现 4.如果你用Microsoft Visual Studio 2005 或者后续版本开发项目，恭喜，你还可以使用skin。 下面就来讲解一下各个办法的详细实现和它们的优缺点。 1：用css的expression判断表达式 实现代码参考： lt;!doctypenbsp;htmlnbsp;publicnbsp;"-//W3C//DTDnbsp;XHTMLnbsp;1.0nbsp;Transitional//EN"nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"gt; lt;htmlnbsp;xmlns="http://www.w3.org/1999/xhtml"nbsp;gt; lt;headgt; nbsp;nbsp;nbsp;nbsp;lt;titlegt;nbsp;diffInput2nbsp;lt;/titlegt; nbsp;nbsp;nbsp;nbsp;lt;metanbsp;name="Author"nbsp;content="JustinYoung"/gt; nbsp;nbsp;nbsp;nbsp;lt;metanbsp;name="Keywords"nbsp;content=""/gt; nbsp;nbsp;nbsp;nbsp;lt;metanbsp;name="Description"nbsp;content=""/gt; nbsp;nbsp;nbsp;nbsp;lt;metanbsp;http-equiv="Content-Type"nbsp;content="text/html;nbsp;charset=utf-8"/gt; nbsp;nbsp;nbsp;nbsp;lt;stylenbsp;type="text/css"gt; nbsp;nbsp;nbsp;nbsp;input nbsp;nbsp;nbsp;nbsp;{ nbsp;nbsp;nbsp;nbsp;background-color:expression(this.type=="text"?'#FFC':''); nbsp;nbsp;nbsp;nbsp;} nbsp;nbsp;nbsp;nbsp;lt;/stylegt; lt;/headgt; lt;bodygt; lt;dlgt; lt;dtgt;Thisnbsp;isnbsp;normalnbsp;textbox:lt;ddgt;lt;inputnbsp;type="text"nbsp;name=""gt; lt;dtgt;Thisnbsp;isnbsp;normalnbsp;button:lt;ddgt;lt;inputnbsp;type="button"nbsp;value="i'mnbsp;button"gt; lt;/dlgt; lt;/bodygt; lt;/htmlgt; 优点：简单，轻量级 缺点：expression判断表达式FireFox是不支持的。致命的是只能区分出一个（例如例子中就只能区分出text文本框），不要试图设置多个，下面的会将上面的覆盖掉 Orz… 当前1/4页nbsp;1234下一页阅读全文 （编辑：广州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
