不同type的input使用不同css的技巧

泡在网上的日子 / 文 发表于2012-04-27 11:49 次阅读 css

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="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':'#000');
      }
      </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="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="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的优点)。

收藏 赞 (0) 踩 (0)
上一篇:复选框(checkbox)和单选框(radio)与文字居中对齐
最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现,单(复)选框和它们后面的 提示文字在不进行任何设置的情况下,是无法对齐的,而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle,也依 然不
下一篇:译文:如何编写可维护的面向对象JavaScript代码
英文原文: How to Write Maintainable OO JavaScript Code 能够写出可维护的面向对象 JavaScript 代码不仅可以节约金钱,还能让你很受欢迎。不信?有可能你自己或者其他什么人有一天会回来重用你的代码。如果能尽量让这个经历不那么痛苦,就可以节省不少时