繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css样式之区分input是按钮还是文本框的方法
- CSS样式表
- CSS网页设计 IE8和IE7共存
- CSS2 打印属性让打印HTML文档不出问题
- 制作网页中设计段落缩进的方法
- CSS border 属性使用说明
- CSS border-style 属性使用方法
- CSS border-color 属性使用方法
- CSS border-width 属性使用教程
- CSS padding属性定义边内补白
- CSS margin 属性定义边外补白
- 网页布局教程 掌握CSS网页布局属性
- css 背景样式属性说明
- span margin 设置生效
- html 滚动条在IE6和IE7中兼容性问题
- IE6 两个div有间隙的问题（IE 3px bug）
- CSS 数字和字母将容器撑大问题解决
- 换个角度看页面重构中的语义化
- DIY属于个人开发使用的CSS Reset
- CSS 空格引起网页布局间距问题
- CSS 网页制作时遇到问题的快速参考技巧
- css li 去掉点的样式写法
CSS样式表 中的 css样式之区分input是按钮还是文本框的方法
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 276 ::
收藏到网摘: n/a
对设置样式时怎么区分input是按钮还是文本框问题的技术调查——把input里面的东西剔出来 当你看到<input>这个html标签的时候，你会想到什么？一个文本框？一个按钮？一个单选框？一个复选框？……对，对，对，它们都对。也许你可能想不到，这个小小的input竟然可以创造出10个不同的东西，下面是个列表，看看，哪些是你没有想到的：
<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 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>
2：用css中的type选择器
实现参考代码：
<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>
2：用css中的type选择器
实现参考代码：
<!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[type="text"]
{
background-color:#FFC;
}
input[type="password"]
{
background-image:url(BG.gif);
}
input[type="submit"]
{
background-color:blue;
color:white;
}
input[type="reset"]
{
background-color:navy;
color:white;
}
input[type="radio"]
{
/*In FF,Some radio style like background-color not been supported*/
margin:10px;
}
input[type="checkbox"]
{
/*In FF,Some checkbox style like background-color not been supported*/
margin:10px;
}
input[type="button"]
{
background-color:lightblue;
}
</style>
</head>
<body>
<dl>
<dt>This is normal textbox:<dd><input type="text" name="">
<dt>This is password textbox:<dd><input type="password" name="">
<dt>This is submit button:<dd><input type="submit">
<dt>This is reset button:<dd><input type="reset">
<dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1">
<dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2">
<dt>This is normal button:<dd><input type="button" value="i'm button">
</dl>
</body>
</html>
3：用javascript脚本实现
实现参考代码：
前台html代码：
<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[type="text"]
{
background-color:#FFC;
}
input[type="password"]
{
background-image:url(BG.gif);
}
input[type="submit"]
{
background-color:blue;
color:white;
}
input[type="reset"]
{
background-color:navy;
color:white;
}
input[type="radio"]
{
/*In FF,Some radio style like background-color not been supported*/
margin:10px;
}
input[type="checkbox"]
{
/*In FF,Some checkbox style like background-color not been supported*/
margin:10px;
}
input[type="button"]
{
background-color:lightblue;
}
</style>
</head>
<body>
<dl>
<dt>This is normal textbox:<dd><input type="text" name="">
<dt>This is password textbox:<dd><input type="password" name="">
<dt>This is submit button:<dd><input type="submit">
<dt>This is reset button:<dd><input type="reset">
<dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1">
<dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2">
<dt>This is normal button:<dd><input type="button" value="i'm button">
</dl>
</body>
</html>
3：用javascript脚本实现
实现参考代码：
前台html代码：
<!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> diffInput </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{behavior:url('css.htc');}
</style>
</head>
<body>
<dl>
<dt>This is normal textbox:<dd><input type="text" name="">
<dt>This is password textbox:<dd><input type="password" name="">
<dt>This is submit button:<dd><input type="submit">
<dt>This is reset button:<dd><input type="reset">
<dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1">
<dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2">
<dt>This is normal button:<dd><input type="button" value="i'm button">
</dl>
</body>
</html>
4：Microsoft Visual Studio 2005中使用skin。
Skin文件参考代码：
总结：上面的方法，都是有各自的优点和缺点，所以单独的使用任何一个都不能很好的解决问题。所以应该将多个方法配合一起使用，这样才能较好的解决问题。但是多个方法配合使用就是完美的了吗？NO～！它也有致命的缺点——多套方案的维护需要更大的成本！
keyword:自动区分各类不同的input样式,在CSS中如何区分<input type=text>和<input type=button>,利用Javascript来实现自动区分各类不同的input样式,input,input type,input type file,input type hidden,input file,input.dll,html input,input type image
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> diffInput </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{behavior:url('css.htc');}
</style>
</head>
<body>
<dl>
<dt>This is normal textbox:<dd><input type="text" name="">
<dt>This is password textbox:<dd><input type="password" name="">
<dt>This is submit button:<dd><input type="submit">
<dt>This is reset button:<dd><input type="reset">
<dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1">
<dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2">
<dt>This is normal button:<dd><input type="button" value="i'm button">
</dl>
</body>
</html>
4：Microsoft Visual Studio 2005中使用skin。
Skin文件参考代码：
<%--Style for common TextBox--%>
<asp:TextBox runat="server" style="background-color:#FFC "></asp:TextBox>
<asp:Button runat="server" style=”background-color:red”></asp:Button>
<asp:TextBox runat="server" style="background-color:#FFC "></asp:TextBox>
<asp:Button runat="server" style=”background-color:red”></asp:Button>
注意里面的样式是用style加上的，而不是用cssClass，道理很简单，如果用cssClass，前面的再用cssClass就会覆盖这个cssClass。导致失败。当然，skin不能单独使用，还要配合css样式表。
优点：可以分区出各个控件形态（注意：skin只能对服务器端控件使用，所以现在已经不是单纯的input标签了，虽然这些服务器端控件“打到”前台的时候仍然是input控件）。除了css，又被分离一层，使得样式的设置能有更好的定制性。其他优点（参考skin的优点）。
缺点：只能对服务器端控件使用。不是所有的项目都能使用skin功能 Orz…
总结：上面的方法，都是有各自的优点和缺点，所以单独的使用任何一个都不能很好的解决问题。所以应该将多个方法配合一起使用，这样才能较好的解决问题。但是多个方法配合使用就是完美的了吗？NO～！它也有致命的缺点——多套方案的维护需要更大的成本！
后记：这是一个以IE6为首，非web标准浏览器横扫天下的乱世年代，不知有多少网页初学者惨死在IE6的诡异解析模式之下，又有多少程序员被IE6所奴役，还有无数web设计者在IE6的胯下忍辱偷生。虽然黑暗中我们欣慰的看到FireFox反对暴统的勇者的出现，以及IE7对Web标准越来越好的支持这道曙光。但是黑夜仍旧将会持续很长一段时间。对于web标准一统天下的年代，我们既喜且悲。喜的是，到那个时候，我们做网页设计和规划将会如同吃饭般简单，悲的是：如果真的到了那个时候，我们吃饭的饭碗还能那么重吗？不过，为了人类社会的进步，拯救地球的科技，发展宇宙的技术文化 -_-b… 我依然期待web标准一统天下的到来。
keyword:自动区分各类不同的input样式,在CSS中如何区分<input type=text>和<input type=button>,利用Javascript来实现自动区分各类不同的input样式,input,input type,input type file,input type hidden,input file,input.dll,html input,input type image
评论 (0) All