css样式之区分input是按钮还是文本框的方法第1/4页(css样式分为)

发布时间：2024-02-27

当你看到<input>这个html标签的时候，你会想到什么？一个文本框？一个按钮？一个单选框？一个复选框？……对，对，对，它们都对。也许你可能想不到，这个小小的input竟然可以创造出个不同的东西，下面是个列表，看看，哪些是你没有想到的：<input type="text" /> 文本框 <input type="password" /> 密码框 <input type="submit" /> 提交按钮 <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的expression判断表达式 2.用css中的type选择器 3.用javascript脚本实现 4.如果你用Microsoft Visual Studio 或者后续版本开发项目，恭喜，你还可以使用skin。下面就来讲解一下各个办法的详细实现和它们的优缺点。 1：用css的expression判断表达式实现代码参考：<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" " xmlns=" ><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样式分为)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:css样式分析,css样式分析,css-inspiration,css inspiration,css样式分如下几种,css in,css in,css in,内容如对您有帮助，希望把文章链接给更多的朋友！

CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox] 今天用了很久时间终于解决了这个问题，基本完美了，唯一不完美的就是IE6只有在图片完全下载完成后才会自动调整大小，不过聊胜于无，总比进入页

谈谈网页设计中的字体应用Font Set Hihi,大家好~最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小，但是却是前端开发中的基本，因为目前的网页，还是以文字信息为主，

网页设计中的 serif 和 sans-serif字体应用 Howdy,大家好，又是我~上一次我们简单的谈了一下fontset和一些要注意的基本问题。今天我们继续字体这一话题，深入讲讲上次提到的通用字体族。首先是