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">
<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
{
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 不断执行的效率问题。
<!--[if lt IE 7]>
<style type="text/css" media="screen">
input{
zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
}
input.text{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
background: #F5F5F5;
}
input.password{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
color: #000; background: #F5F5F5;
width: 50px;
}
input.button{
border: 1px solid; border-color: #EEE #CCC #CCC #EEE;
color: #000; font-weight: bold; background: #F5F5F5;
}
input.reset{
border: 1px solid; border-color: #EEE #CCC #CCC #EEE;
color: #666; background: #F5F5F5;
}
</style>
<![endif]-->
<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">
<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"]
{
}
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">
<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="</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 ...
随机推荐
- 转:mysql5.6.12 for Linux安装
原文链接:http://mmicky.blog.163.com/blog/static/1502901542013635317349/ 1:上www.mysql.org下载64位版本mysql5.6. ...
- CentOS 6.4 64位 源码编译hadoop 2.2.0
搭建环境:Centos 6.4 64bit 1.安装JDK 参考这里2.安装mavenmaven官方下载地址,可以选择源码编码安装,这里就直接下载编译好的wget http://mirror.bit. ...
- cf B. Inna and Nine
http://codeforces.com/contest/374/problem/B #include <cstdio> #include <cstring> #includ ...
- UOJ 217 奇怪的线段树
http://uoj.ac/problem/217 题意就不X了,思路在这: 居然一开始把sap里面的mn设置为inf了,我是傻逼.. #include<cstdio> #include& ...
- 关于如何在C语言中嵌入汇编命令
转载自:http://www.keil.com/support/docs/2308.htm C51: GETTING INLINE ASSEMBLY TO WORK Information in th ...
- 新版的DEV RichEdit很强悍,兼容docx,排版更强
RV至少rtf格式不用自己搞了 Rv没Dev出的强悍 RV最蛋疼的就是表格 DEV目前看来,表格比RV强其他方面来说,觉得到差不多,无所谓dev的excel我整过一次,BUG不少dxRichEdit换 ...
- 【HDOJ】1310 Team Rankings
STL的应用,基本就是模拟题. /* 1410 */ #include <iostream> #include <string> #include <algorithm& ...
- 男装电商Bonobos融资5500万美元,计划IPO,全靠体验店战略 - 国外 - 快鲤鱼
男装电商Bonobos融资5500万美元,计划IPO,全靠体验店战略 - 国外 - 快鲤鱼 男装电商Bonobos融资5500万美元,计划IPO,全靠体验店战略
- 微信/易信公共平台开发(二):自定义菜单的PHP实现(提供源码)
微信把公众号分成订阅号和服务号两种,服务号可以自定义菜单, 菜单大大方便了用户操作. 比如:公众服务号 "中国南方航空" 的自定义菜单如下图: 点菜单就可以直接进入操作了,方便! ...
- ubuntu环境配置
网络配置 主要文件:/etc/network/interfaces,这里是IP.网关.掩码等的一些配置: # This file describes the network interfaces av ...