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樣式化表單，我們可以使表單更美觀和易使用。我們可以使用基礎樣式為表單元素定義樣式，使用表單美化插件實現快速美化，自定義單選框和複選框，自定義下拉框，樣式化按鈕等方式實現表單美化。