我们常常通过直接定义 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 。（吃水不忘挖井人）
分享到：
相关推荐
分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。 演示地址：...
在线demo源码：https://github.com/dcsite/magic-input使用$ npm install magic-input你需要引入 dist/magic-input.css或者dist/magic-input.min.css 文件到你的工程或者HTML中。如果你使用Stylus 你就可以...
基本的HTML操作，来自IMOOC的学习笔记。 1 1. HTML介绍 4 1.1. HTML与CSS的关系 4 1.2. 标签 4 1.3. HTML5文档结构 5 1.4. head标签 7 1.5. body标签 8 1.6. html注释 8 ...15. CSS3样式设置小技巧 29
这个小小的input竟然可以创造出10个不同的东西，下面是个列表，看看，哪些是你没有想到的：所以你可能会说，input真是一个伟大的东西，竟然这么有“搞头”，但是当你真正在项目中试图给不同的控件设置不同的样式时，...
可以这样设置css样式： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>input输入框提示文字</title> <style> /*修改提示文字的颜色*/ input::-webkit-...
2. CSS样式: - 使用CSS设置整体页面布局,包括标头、主体内容、页脚等。 - 设置表单样式,如字体、颜色、边框、间距等。 - 使用CSS伪类`:hover`、`:focus`等为表单元素添加交互效果。 - 利用CSS媒体查询实现响应式...
- 不同的标签具有相同的样式 div,p{} * 伪元素选择器 * 超链接的状态 - 原始 :link - 悬停 :hover - 点击 :active - 点击之后 :visited 4、盒子模型(了解) * 边框 border:2px solid red; 上下左右 border...
以下CSS样式实现了各浏览器的标签禁止选中功能。 复制代码代码如下:moz-user-select: -moz-none;-moz-user-select: none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:...
一个css框架，非常轻量，仅4KB，适合电脑内存少的开发者使用，其定义大部分常用html标签样式，如button，input(search)等，兼容大部分css框架(Bootstarp框架与其冲突，还有部分与该框架冲突，之后会改进，尽量与其他...
(1)\第01章 HTML基础；目录中文件数:7个 ...├─01、第一个HTML页面及HBuilder的使用.mp4 ...├─14、HTML5input标签tel,color,下拉框-.mp4 ├─15、HTML5+CSS3边框圆角.mp4 ├─说明.txt (5)\第05章 Jav
web前端第一阶段视频教程目录HTML 部分webstrom 的常用配置及... DTD 文档声明基本标签行内元素与块元素请求响应模型Frameset 框架集表格布局页面中常见的图像格式HTML 实体字符表单HTML5 中的 input 类型...
在input标签里设置type="submit"即可设置此表单控件为按钮。 submit按钮代码： 复制代码代码如下:<input name=”” type=”submit” value=”提交” /> submit按钮效果截图 html submit按钮效果截图 2、html...
创建一个HTML文件，并在其顶部添加和标记。 在标记中创建一个元素，用于包含登录表单中的各种输入字段和...除此之外，还可以使用现有的CSS样式库来更快地创建漂亮的登录表单样式，例如Bootstrap、Materialize等等。
方法一：html5配合css3实现带提示文字的输入框(摆脱js)；...这个现在通行的做法是在Input标签后面增加一个Label。使用JS控制。 HTML5出现后，我们有一个更好的方法。 <input type="text" placeholder="用
对input标记设定样式，代码如下： //HTML 代码 复制代码代码如下: <form> <input type=”text” name=”textfield” id=”textfield” /> <input type=”submit” name=”button” id=”button” ...
这将 PostCSSed 样式包装在 Lit 的css模板文字标签中，因此您可以直接将它们导入到您的组件中。 // rollup.config.js import postcss from 'rollup-plugin-postcss' ; import postcssLit from 'rollup-plugin-...
按钮标签 在,<button>或input元素上使用按钮class。但是为了避免跨浏览器的不一致性，建议使用<button>标签。 <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title&...