让不同类型的 Html input 标签具有不同的CSS样式

最新推荐文章于 2021-11-28 16:10:46 发布

亚飞正传

最新推荐文章于 2021-11-28 16:10:46 发布

阅读量470

点赞数

分类专栏： HTML

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我们常常通过直接定义 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 。（吃水不忘挖井人）

亚飞正传

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让不同类型的 Html input 标签具有不同的CSS样式

我们常常通过直接定义 input 标签的样式来美化文本框、按钮、单选框、多选框等 input 标签。例如，我们在 .css 文件或者 style 标签中定义如下的样式：input {border:1px blue solid;}然后，我们所有的input标签，包括按钮、文本框、单选框等都有了一个1象素宽的蓝色实体边框的修饰了。然而我个人很不喜欢单选框和复选框应用这种实体边框的样式...
复制链接

扫一扫