CSS表单样式化——让网站表单更美观和易使用

表单是任何网站的重要组成部分，那么如何让表单更美观和易使用呢？这就需要运用CSS进行样式化了。

一、基础样式

以最基础的表单样式为例，我们需要为form元素设置以下样式：

form {
  display: block;
  width: 600px;
  margin: 0 auto;
  padding: 20px;
}

以上代码使用了块级元素，并进行了居中对齐，加上了内边距，使表单看起来更加整洁。接下来，我们需要定义input元素的默认样式：

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  display: block;
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 2px;
  border: 1px solid #ccc;
  font-size: 16px;
}

以上代码定义了常见的表单元素的样式，如文本框、密码框、邮件地址、电话号码、网址、文本域、下拉框等。这里我们使用了display:block, width:100%来使元素充满整个容器，padding: 8px和margin-bottom:10px来为元素添加内边距和外边距，border:1px solid #ccc 和 border-radius:2px来为元素添加边框和圆角等。我们使用了font-size:16px来为所有的表单元素定义字体大小，保证整个表单看起来一致。

二、表单美化

基础样式虽然看起来足够简洁，但是有些单调。下面我们使用CSS3的特性进一步美化表单。

1. 使用表单美化插件

表单美化插件可以帮助我们简单快捷地美化表单元素，如jQuery UI，Select2，Bootstrap等。只需要在网站中引入相应的CSS和JS文件即可轻松地美化表单。

// 引入jQuery UI的CSS和JS文件
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2. 自定义单选框和复选框

默认的单选框和复选框是基础样式中最难看的部分之一。我们可以使用伪元素来自定义单选框和复选框。

/* 单选框 */
input[type="radio"] {
  position: relative;
  display: none;
}
input[type="radio"]+label:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  text-align: center;
  line-height: 18px;
  font-size: 14px;
}
input[type="radio"]:checked+label:before {
  content: "\2713";
  background-color: #20c997;
  color: #fff;
  border-color: #20c997;
}

/* 复选框 */
input[type="checkbox"] {
  position: relative;
  display: none;
}
input[type="checkbox"]+label:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border-radius: 2px;
  border: 2px solid #ccc;
  text-align: center;
  line-height: 18px;
  font-size: 14px;
}
input[type="checkbox"]:checked+label:before {
  content: "\2713";
  background-color: #20c997;
  color: #fff;
  border-color: #20c997;
}

3. 自定义下拉框

默认的下拉框也是很难看的一部分。我们可以使用一些CSS技巧和一点点JS来实现自定义下拉框。

// HTML
<div class="dropdown">
  <select id="selectbox">
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
  </select>
  <i class="fa fa-caret-down"></i>
</div>

// CSS
.dropdown {
  position: relative;
  display: inline-block;
  margin: 0 10px;
}
.dropdown select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 8px 20px;
  border-radius: 2px;
  border: 1px solid #ccc;
  font-size: 16px;
  background-color: transparent;
  width: 100%;
  cursor: pointer;
}

.dropdown i {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 14px;
}

.dropdown select:focus {
  outline: none;
}

.dropdown ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 2px;
  border: 1px solid #ccc;
  overflow-y: auto;
}

.dropdown ul li {
  padding: 8px 20px;
  border-bottom: 1px solid #ccc;
}
.dropdown ul li:last-child {
  border-bottom: none;
}

.dropdown ul li:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

// JS
$("#selectbox").on("change", function() {
  var selected = $(this).find("option:selected").text();
  $(this).siblings("i").text(selected);
});

4. 样式化按钮

表单按钮是操作表单的重要组成部分，样式化按钮可以使表单更为美观。我们可以对按钮进行背景色、文字颜色、圆角等属性设置。

button,
input[type="submit"] {
  background-color: #20c997;
  color: #fff;
  border: none;
  border-radius: 2px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover,
input[type="submit"]:hover {
  background-color: #16a085;
}

三、总结

通过CSS样式化表单，我们可以使表单更美观和易使用。我们可以使用基础样式为表单元素定义样式，使用表单美化插件实现快速美化，自定义单选框和复选框，自定义下拉框，样式化按钮等方式实现表单美化。