亲宝软件园·资讯

展开

input 按钮 文本框 css样式之区分input是按钮还是文本框的方法

人气:0
想了解css样式之区分input是按钮还是文本框的方法的相关内容吗,在本文为您仔细讲解input 按钮 文本框的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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>

优点:简单,轻量级
缺点:expression判断表达式FireFox是不支持的。致命的是只能区分出一个(例如例子中就只能区分出text文本框),不要试图设置多个,下面的会将上面的覆盖掉 Orz…

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>

优点:简单,明了,可以分区出各个input控件形态。
缺点:type选择器,IE6之前的对web标准支持的不太好的浏览器不能支持(致命呀 Orz…)

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>

Css.htc代码:
<script language=javascript>
switch(type)
{
    
case 'text':
    style.backgroundColor
="red";
    
break;

    
case 'password': 
    style.backgroundImage
="url(BG.gif)";
    
break;

    
case 'submit':
    style.backgroundColor
="blue";
    style.color
="white";
    
break;

    
case 'reset':
    style.backgroundColor
="navy";
    style.color
="white";
    
break;

    
case 'radio': 
    style.backgroundColor
="hotpink";
    
break;

    
case 'checkbox': 
    style.backgroundColor
="green";
    
break;

    
case 'button':
    style.backgroundColor
="lightblue";
    
break;

    
default: ;//others use default style.
}
</script>

优点:可以分区出各个input控件形态。多种技术的混合使用,满足“我是高手”的虚荣心。
缺点:技术牵扯面教广,因为用js后期处理,所以在js没有起作用之前,各个input还是原始状态,然后突然“变帅”会让你的页面很奇怪。较致命的是FireFox不支持 Orz…

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>


注意里面的样式是用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

加载全部内容

相关教程
猜你喜欢
用户评论