CSS分别设置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">

<head>

<title> diffInput2 </title>

input

{

padding: 0px; line-height: 1.8; color: rgb(0, 0, 255);">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…

★★★★★★★★★★★★★★★★★★★★★★★★★★★

另一种方法：

input{
zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
}

两点：

1、将 input 的属性取出来，赋给 className。

2、对于 expression，这里使用一个无关紧要的属性（此处是zoom）来触发，处理完需要做的事情之后，再将此属性覆盖掉以解决 expression 不断执行的效率问题。



<style type="text/css" media="all">
input[type="text"]{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
background: #F5F5F5;
}
input[type="password"]{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
color: #000; background: #F5F5F5;
width: 50px;
}
input[type="button"]{
border: 1px solid; border-color: #EEE #CCC #CCC #EEE;
color: #000; font-weight: bold; background: #F5F5F5;
}
input[type="reset"]{
border: 1px solid; border-color: #EEE #CCC #CCC #EEE;
color: #666; background: #F5F5F5;
}
</style>
</head>
<body>
<input type="text" name="xx" />
<input type="password" name="yy" />
<input type="checkbox" name="oo" />
<input type="radio" name="pp" />
<input type="button" name="qq" value="button" />
<input type="reset" name="oo" value="reset" />
</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">

<head>

<title> diffInput2 </title>

input[type="text"]

{

}

input[type="password"]

{

background-image:url(BG.gif);

}

input[type="submit"]

{

color:white;

}

input[type="reset"]

{

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"]

{

}

</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">

<head>

<title> diffInput </title>

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代码：

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="</asp:TextBox>

<asp:Button runat="server" style=”background-color:red”></asp:Button>

注意里面的样式是用style加上的，而不是用cssClass，道理很简单，如果用cssClass，前面的再用cssClass就会覆盖这个cssClass。导致失败。当然，skin不能单独使用，还要配合css样式表。

优点：可以分区出各个控件形态（注意：skin只能对服务器端控件使用，所以现在已经不是单纯的input标签了，虽然这些服务器端控件“打到”前台的时候仍然是input控件）。除了css，又被分离一层，使得样式的设置能有更好的定制性。其他优点（参考skin的优点）。

CSS分别设置Input样式（按input类型）的更多相关文章

使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。
查看本章节查看作业目录需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
CSS 格式设置标签间距和 input slot
作者:张艳涛日期:2020-07-29 CSS设置俩个标签的间距及 Input Slots <div> <div class="m-b-20 ovf-hd"& ...
CSS之设置滚动条样式
因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...
CSS如何设置列表样式属性
列表样式属性在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
CSS如何设置列表样式属性，看这篇文章就够用了
列表样式属性在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
CSS()方法设置元素样式
使用CSS()方法可以直接设置元素的样式,方法为:css(name,value) $(p).css("font-weight", "bold"); // ...
CSS中设置字体样式
<style type="text/css"> body{ font-family: SimHei,"微软雅黑",sans-serif; } < ...
[CSS] input样式定制
input样式定制一个泥团input,想怎么捏就怎么捏 appearance: none 所有主流浏览器都不支持 appearance 属性. Firefox 支持替代的 -moz-appearan ...
css样式让input垂直居中
css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

随机推荐

zend framework 1 连接oracle数据库的写法
1 用Zend_Db_Adapter_Pdo_Oci方式 $config =array( 'host'=>'192.168.5.40', 'port'=>'1521', 'dbname'= ...
转：WebSocket与Java
Bozhidar Bozhanov是Ontotext AD的高级软件工程师,拥有多年的从业经验,也是stackoverflow上的活跃用户.他精通于Java与Java技术栈,如Spring.JPA.J ...
游标、获取本地本地多个文件、Excel数据导入、跨服务器数据拷贝、行转列示例
)='C:\Users\Administrator\Desktop\待处理数据\顺江学校4\' ---------------------------------------------------- ...
C51 库函数(1)
C-51软件包的库包含标准的应用程序,每个函数都在相应的头文件(.h)中有原型声明.如果使用库函数,必须在源程序中用预编译指令定义与该函数相关的头文件(包含了该函数的原型声明).例如: #includ ...
POJ1062 昂贵的聘礼(最短路)
题目链接. 分析: 一开始以为简单的DFS,直接做,MLE了. 本体应该用最短路径(Dijkstra算法)做. 此题的关键在于等级限制的处理,采用枚举,即假设酋长等级为5,等级限制为2,那么需要枚举等 ...
Java---文件的切割与合并，已经实现图形界面(工具)
实现对任意文件的切割,实现对切割后的文件的合并. 上次只写了特定目录下的文件切割与合并,有点遗憾, 这次,我写了一个图形界面来实现对文件的切割与合并. 文件切割: 用户可以自己选择需要切割的文件, 软 ...
HDU5039--Hilarity DFS序+线段树区间更新 14年北京网络赛
题意:n个点的树,每个条边权值为0或者1, q次操作 Q 路径边权抑或和为1的点对数, (u, v)(v, u)算2个. M i修改第i条边的权值如果是0则变成1, 否则变成0 作法: 我们可以求出 ...
夏普比率(Sharpe Ratio)
投资中有一个常规的特点,即投资标的的预期报酬越高,投资人所能忍受的波动风险越高:反之,预期报酬越低,波动风险也越低.所以理性的投资人选择投资标的与投资组合的主要目的为:在固定所能承受的风险下,追求最大 ...
UIAlertController 的使用（NS_CLASS_AVAILABLE_IOS(8_0)iOS8以后有效）
iOS 8的新特性之一就是让接口更有适应性.更灵活,因此许多视图控制器的实现方式发生了巨大的变化.全新的UIPresentationController 在实现视图控制器间的过渡动画效果和自适应设备尺 ...
java—— 调用系统命令
调用所在环境的命令链接:http://blog.csdn.net/yy6060/article/details/6311916 1 import java.io.*; 2 class Exec{ 3 ...

CSS分别设置Input样式（按input类型）

CSS分别设置Input样式（按input类型）的更多相关文章

随机推荐

热门专题