`
Rod_johnson
  • 浏览: 73839 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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

css 
阅读更多

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

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

另一种方法：

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

    {

    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…

转自：http://hi.baidu.com/o0o%CD%F5%D4%F3%C3%F1o0o/blog/item/23164a4ecd0a8d3eaec3ab13.html

分享到：
| Oracle 游标使用全解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css3 input按钮样式代码.zip

    本资源"css3 input按钮样式代码.zip"正是利用这些特性来定制input类型的按钮样式，以增强页面的视觉效果和用户体验。 输入框(input)是HTML表单中的基本元素，通常用于用户输入数据。在传统HTML中，input按钮样式...

    纯CSS3实现漂亮的input输入框动画样式库(Text input love)

    分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。 演示地址：...

    css苹果手机去掉input样式

    ### CSS技巧：如何针对苹果手机优化输入框样式 在移动端Web开发中，经常会遇到不同设备浏览器对HTML元素渲染效果不一致的问题，特别是对于输入框（`&lt;input&gt;`）的默认样式，苹果手机上的Safari浏览器常常与其他...

    很漂亮又实用的的Input框，支持CSS或者图片两种样式。

    以下是一些常见的CSS技巧，可以用来定制Input框的样式： 1. **边框和内阴影**：使用`border`和`box-shadow`属性可以改变输入框的边框样式和添加深度感。 ```css input { border: 1px solid #ccc; box-shadow: ...

    文件上传input file简便美化方案(css)

    在探讨文件上传组件的美化方案时，我们会涉及到多个方面的知识点，主要包括跨浏览器兼容性的处理、CSS样式的应用以及JavaScript的交互操作。首先，我们要理解在不同浏览器中文件上传input（&lt;input type="file"&gt;）的...

    纯CSS美化input radio checkbox样式.zip

    本资源“纯CSS美化input radio checkbox样式.zip”提供了一种方法，通过纯CSS3技术对这些元素进行美化，提升网页界面的视觉效果。 首先，CSS3引入了新的选择器和属性，使得我们可以更加精确地控制元素的样式，包括...

    css3酷炫input框

    2. **伪类选择器**：`:hover`、`:focus`、`:active`等伪类选择器可以分别控制鼠标悬停、获取焦点和按下状态时input框的样式，使得用户交互更具有反馈感。 3. **阴影效果**：CSS3的`box-shadow`属性可以创建输入框的...

    css美化input file按钮的方法

    如果要让浏览按钮更漂亮一点，我们想定义它的背景颜色，甚至想用...偶然看到一篇文章：input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0，再定义一个label标签样式，来覆盖透明掉的按钮。支持IE6\IE7\FF

    CSS3输入文字input文本框动画效果

    在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉表现力，尤其是在创建动态和交互性元素方面。"CSS3输入文字input文本框动画效果"是利用CSS3特性来增强用户界面的一个典型例子，它可以提升用户体验...

    CSS3 input输入框蓝光特效.zip

    在传统的CSS中，我们可以通过设置边框、背景色等属性来改变input输入框的样式。然而，CSS3的transition属性则提供了平滑的过渡效果，使得元素的样式在不同状态间切换时能够有渐变的动画效果。 在“CSS3 input输入框...

    14种CSS3炫酷表单input输入框美化效果

    这个资源包含的`index.html`文件展示了这些效果的实际应用，而`js`、`fonts`和`css`目录则分别包含了必要的JavaScript代码、字体文件和样式表，方便开发者理解和学习。`readme.html`可能提供了进一步的解释和指南。...

    js css样式放大镜

    **标题解析：** "js css样式放大镜" 这个标题揭示了我们即将讨论的核心技术——使用JavaScript和CSS实现一种视觉效果，即放大镜功能。这个功能常见于电子商务网站的产品展示，用户可以通过它查看商品细节。 **描述...

    只修改input file组件的浏览按钮样式

    - **隐藏原始文件输入框**：通过CSS将原始的`&lt;input type="file"&gt;`设置为不可见。 - **创建自定义按钮**：使用`&lt;input type="button"&gt;`或其他HTML元素（如`&lt;button&gt;`）作为自定义的“浏览”按钮。 - **绑定点击事件*...

    CSS让网页提交input按钮与众不同

    让我们先来看两个例子：1、把按钮的背景由灰色变成黄色，下面是代码：〈form method="POST"〉〈input type="button" value="按钮" name="B1" style="background-color: rgb(255,255,0)"〉〈/p〉〈/form〉“form”...

    15个CSS3动态输入框input框代码

    "15个CSS3动态输入框input框代码"是一个集合，它提供了多种不同样式的输入框效果，旨在提升用户体验，使网页交互更具有吸引力。下面将详细阐述这些知识点： 1. **CSS3选择器**：CSS3引入了更多精确的选择器，如类...

    html5-input样式

    `:focus`用于高亮当前激活的输入框，`:valid`和`:invalid`则可以分别在输入有效或无效时显示特定样式。 6. **自定义控件（Custom Controls）**：HTML5提供了`&lt;datalist&gt;`元素，可以为`input`创建下拉建议列表，用户...

Magicbox
Global site tag (gtag.js) - Google Analytics