我们常常通过直接定义 input 标签的样式来美化文本框、按钮、单选框、多选框等 input 标签。例如，我们在 .css 文件或者 style 标签中定义如下的样式：
input {border:1px blue solid;}
然后，我们所有的input标签，包括按钮、文本框、单选框等都有了一个1象素宽的蓝色实体边框的修饰了。然而我个人很不喜欢单选框和复选框应用这种实体边框的样式，同时又不希望直接修改 input type="radio" 或者 input type="checkbox" 的标签样式，因为那样会破坏整个文档结构，零散的样式设置也不便于日后的维护。也许你也希望赋予不同类型的 input 以不同的样式。
那么，不直接修改具体的某一个标签，而通过修改我们事先定义好的统一样式文件如何做到这一点呢？
也许聪明的你，应该已经想到些什么了。
对了，答案就是：利用 css 的 expression 功能。
下面是我的一个示例，您可以复制粘贴为一个HTML文件，然后进行查看。
<html>
<head>
<style>
input {border: expression(input_test(this))}
</style>
<script>
function input_test(obj) {
switch (obj.type) {
case 'text':
return '1px blue solid';
case 'button':
return '1px black solid';
case 'radio':
return '1px red solid';
case 'checkbox':
return '1px green dotted';
default:
return ';';
}
}
</script>
</head>
<body>
<input type="text" size="30" />
<input type="radio" value="1" name="radio1" />
<input type="checkbox" />
<input type="button" value=" Button " />
</body>
</html>
|
转自http://hi.baidu.com/xiaochong0522/blog/item/6314b1f03417bac67931aae7.html 。（吃水不忘挖井人）
分享到：
相关推荐
在HTML5中，`<input>`标签支持多种类型，每种类型对应不同的用户输入控件。例如，`type="text"`创建一个单行文本输入框，`type="password"`则创建密码输入框，`type="checkbox"`用于复选框，而`type="file"`则允许...
分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。 演示地址：...
**标题解析：** "js css样式放大镜" 这个标题揭示了我们即将讨论的核心技术——使用JavaScript和CSS实现一种视觉效果，即放大镜功能。这个功能常见于电子商务网站的产品展示，用户可以通过它查看商品细节。 **描述...
#### 二、CSS样式设置 在给定的例子中，作者尝试对 `input type=file` 进行样式定制。具体代码如下： ```html <input type="file" name="file" size="40" style="background-color:#f9f9f9; color:#336699; border...
在本文中，我们将深入探讨如何使用jQuery（jq）来创建一个简单的input标签生成器，以及如何结合HTML和CSS实现这一功能。input标签是HTML中用于用户输入数据的基本元素，而jQuery则提供了一种方便的方式来处理DOM操作...
CSS 可以分为三种类型：外部样式表、内部样式表和内联样式。 1. 外部样式表是在.css 文件中定义的样式表，这种样式表可以作用于多个 HTML 文档。 2. 内部样式表是在 HTML 文档的标签内部定义的样式表，这种样式表...
在实现这一功能时，CSS样式也是关键，它决定了标签的外观，如字体、颜色、背景色、边框等。我们可以使用CSS预处理器如Sass或Less来编写更高效的样式代码。在这个项目中，`static`文件夹很可能包含了CSS文件，用于...
本教程将详细讲解如何利用HTML5和CSS3来创建一个具有独特选中样式的checkbox多选框特效。 首先，HTML5的`<input>`标签用于创建交互元素，其中`type="checkbox"`属性定义了一个复选框。基本的HTML结构可能如下： ``...
- `<input>`标签用于创建不同类型的输入控件，如文本框、按钮等，`type`属性可以是`text`、`password`、`radio`、`checkbox`、`submit`等。 - `<select>`标签用于创建下拉列表，`<option>`用于定义列表中的选项。 - ...
在表单中，`<input>` 标签是最常用的控件之一，它可以以多种类型 (`type`) 出现，以满足不同需求。以下是一些常见的 `input` 类型： 1. **单行文本输入框 (input type="text")**：允许用户输入一行文本。例如： ``...
在网页设计中，HTML（超文本标记语言）和CSS（层叠样式表）是构建用户界面的两大核心技术。本教程将聚焦于如何使用HTML和CSS创建一个简单的开关样式，为用户提供一种直观的交互方式，例如切换灯泡状态、开启或关闭...
"css3 input按钮样式代码.zip"这个压缩包文件显然是一个包含有关如何使用CSS3来定制HTML输入类型为"button"的样式的资源集合。以下是对这个主题的详细讲解： 1. **CSS3基础**： - CSS3是CSS的最新版本，引入了许多...
在HTML中，我们可以将这些样式应用到`<a>`标签上，同时将`<input type="file">`嵌套在内，以实现文件上传的功能。这样，用户点击美化过的按钮，就会触发文件选择对话框。 ```html ;" class="a-upload"> <input ...
`<input>`标签是HTML的表单元素，可以设置多种类型（type属性），如"text"（文本）、"password"（密码）、"email"（电子邮件）等，来满足不同类型的用户输入需求。例如： ```html <input type="text" id="username...
在网页设计中，CSS（Cascading Style Sheets...以上就是CSS样式表单美化的一些核心知识点，通过这些技巧，我们可以打造出美观且易用的网页表单，提升用户体验。这个系列将深入讲解每个方面，帮助你掌握表单设计的艺术。
根据给定文件的信息，我们可以总结出以下关于“通用CSS样式”的关键知识点： ### CSS样式的基础配置 #### 1. **重置默认样式** - 为了确保不同浏览器间的一致性，通常会在CSS文件的开头处对全局元素的`margin`和`...
2. **伪类选择器**：`:hover`、`:focus`、`:active`等伪类选择器可以分别控制鼠标悬停、获取焦点和按下状态时input框的样式，使得用户交互更具有反馈感。 3. **阴影效果**：CSS3的`box-shadow`属性可以创建输入框的...
总之，"html+css登录页面"这个主题涵盖了网页设计的基础知识，包括HTML元素的使用、CSS样式的编写以及如何结合它们创建美观且实用的登录界面。通过学习和实践这些知识，开发者能够提升网页设计能力，为用户提供更加...
例如，`<a>`标签的`href`属性定义链接地址，`<img>`标签的`src`属性指定图片源，`<form>`标签的`action`属性定义表单提交的URL，以及`<input>`标签的各种类型属性如`type="text"`（文本输入）、`type="submit"`...
在HTML5中，`<input>`元素有多种类型，如text、password、email、date等，用于不同的数据输入需求。在这个特效中，我们主要关注`type="text"`，这是最常见的文本输入框。 接下来，CSS3的引入使得我们可以对这些HTML...