基础 CSS 表单自定义控件

在 Web 开发中，表单是最常用的元素之一。然而，浏览器默认的表单样式可能并不符合我们的设计需求，因此我们需要利用CSS来自定义表单控件。

本文将介绍如何使用CSS美化表单，包括以下内容：

• 输入框样式
• 多选框和单选框的样式
• 下拉列表样式
• 按钮样式

输入框样式

输入框是表单中最常用的控件之一。下面是一些样式代码片段：

/* 去掉输入框的边框 */
input {
  border: none;
}

/* 输入框添加圆角 */
input {
  border-radius: 5px;
}

/* 添加输入框阴影效果 */
input {
  box-shadow: 0px 0px 5px #888888;
}

/* 修改输入框的背景色和文字颜色 */
input {
  background-color: #F5F5F5;
  color: #333333;
}

多选框和单选框的样式

多选框和单选框也是表单中常用的控件。下面是几个常见的样式：

/* 去掉多选框和单选框的默认样式 */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
}

/* 更改多选框和单选框的样式 */
input[type="checkbox"], input[type="radio"] {
  border: 1px solid #cccccc;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

/* 当多选框或单选框选中时，改变背景色或边框颜色 */
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background-color: #3366CC;
  border-color: #3366CC;
}

下拉列表样式

下拉列表也是表单中经常使用的控件。下面是一些简单的样式：

/* 去掉默认下拉列表的样式 */
select {
  appearance: none;
  -webkit-appearance: none;
}

/* 添加自定义下拉列表样式 */
select {
  background: url('icon.png') no-repeat right center;
  padding: 5px;
  border: none;
  font-size: 16px;
  color: #333333;
}

按钮样式

按钮是表单中非常重要的控件，下面是一些常见的样式：

/* 去掉默认按钮的边框 */
button {
  border: none;
}

/* 添加背景色和阴影 */
button {
  background-color: #3366CC;
  box-shadow: 0px 0px 5px #888888;
}

/* 添加圆角 */
button {
  border-radius: 5px;
}

/* 修改文字颜色 */
button {
  color: #FFFFFF;
}

在实际开发中，我们可以根据实际需求，使用不同的样式来美化表单控件，让表单更符合我们的设计要求。