WonderCSS

为 HTML 表单定义样式,让它们生动起来!

或许你设计并完成网页的制作,但独有搜索条和按钮却是干巴巴的无法融入整体页面风格。又或者你通过一番折腾手段让他们融入了页面,但却是呆若木鸡毫无手感。这时候我们就需要通过CSS样式表让它们生动起来!

为表单定义样式首先我们需要了解下 input 都有哪些 type 属性:

<input> 标签的 type 属性

描述
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和 “浏览”按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

通过 type 类别来定义样式

了解了<input> 标签的 type 属性后,我们可以在样式表中直接定义某一类属性。由于表单属于用户与WEB之间的互动,所以我们必须要照顾到它的一些触发行为,下面我们以最常定义的文本框和按钮来做示例:



<!-- 定义文本框 -->
input[type="text"] {
     outline:0;
     outline-style:none;
     outline-width:0;
     -moz-outline-width:0;
     border:1px solid #666;
     -webkit-transition:all .3s ease-in-out;
     -moz-transition:all .3s ease-in-out;
     -ms-transition:all .3s ease-in-out;
     transition:all .3s ease-in-out;
}
<!-- 激活文本框状态 也就是鼠标点入了文本框 -->
input[type="text"]:focus {
     border:1px solid #000;
     text-shadow:1px 1px 0 rgba(0,0,0,0.2);
}
<!-- 定义按钮 -->
input[type="submit"] {
     border:1px solid #000;
     background-color:#369;
     border:1px solid #666;
     -webkit-transition:all .3s ease-in-out;
     -moz-transition:all .3s ease-in-out;
     -ms-transition:all .3s ease-in-out;
     transition:all .3s ease-in-out;
}
<!-- 鼠标悬浮按钮时 -->
input[type="submit"]:hover {
     background-color:#69c;
}
<!-- 鼠标点击按钮时 -->
input[type="submit"]:active {
     background-color:#333;
}


样式中的 outline 属性定义激活状态用的,我们在这里把它们都去掉了,因为在默认状态下不同的浏览器效果不同,所以干脆干掉或者自己来定义。同时在这里我们使用了 CSS3 动画属性 Transition ,他的过渡效果会让表单更加细腻富有弹性。

通过ID或Class标签定义样式

除了上面根据type属性来定义样式外,我们也可以用ID或Class这种常规方式来做样式。在这里我建议结合这两种方法同时使用,先定义上的type样式,再在有同类表单需要做差别的时候在已经ID或Class做区分。

现在由于浏览器们为开发者们提供了很高的便利,如 Chrome 右键的“审查元素”轻松就能知道他们的默认属性,我们相应做调整即可。

By 于湛 发布于 2013.03.17 10,258 次浏览

为 HTML 表单定义样式,让它们生动起来!》上有1条评论

  1. Pingback引用通告: 自定义DedeCMS管理后台登录页面 | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注