css样式之区分input是按钮还是文本框的方法第1/4页-巨人网络通讯

主页 > 知识库 > css样式之区分input是按钮还是文本框的方法第1/4页

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

当你看到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…

1234下一页阅读全文

标签：河南长治红河上海沈阳乐山沧州新疆

巨人网络通讯声明：本文标题《css样式之区分input是按钮还是文本框的方法第1/4页》，本文关键词；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。

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

QQ咨询

电话咨询