CSS 用于美化复选框和输入框的样式

在本文中，我们将介绍如何使用CSS来美化复选框和输入框的样式。复选框和输入框是网页设计中经常用到的元素，通过添加一些样式，我们可以改变它们的外观，使其更加符合网页的整体风格。

阅读更多：CSS 教程

美化复选框

复选框是一种常见的用户输入控件，用户可以通过勾选或取消勾选复选框来进行选择。然而，默认的复选框外观通常是相对简单和乏味的，不太能够满足现代网页设计的需求。下面是一些用CSS美化复选框的示例：

改变复选框的尺寸和颜色：

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 5px;
  outline: none;
}

input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

通过设置复选框的宽度、高度、边框样式和背景颜色，可以改变复选框的外观。上述示例中，复选框被渲染为一个20像素乘以20像素的方形，选中时背景颜色变为蓝色。

使用自定义图标代替默认的复选框：

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 5px;
  outline: none;
}

input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

input[type="checkbox"]::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: white;
  border-radius: 3px;
}

input[type="checkbox"]:checked::before {
  content: "\2713";
  font-size: 12px;
  color: white;
  text-align: center;
  line-height: 1;
}

在这个示例中，我们使用::before伪类为复选框添加一个自定义图标。未选中时，图标为一个白色的方形，选中时则显示一个白色的勾号。

美化输入框

输入框也是网页设计中经常用到的元素，用户可以在输入框中输入文本、数字等。与复选框一样，默认的输入框样式相对简单，无法满足个性化的设计需求。下面是一些用CSS美化输入框的示例：

修改输入框的边框和背景颜色：

input[type="text"] {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  background-color: #f8f8f8;
}

使用border属性可以修改输入框的边框样式和颜色，通过设置border-radius属性可以改变边框的圆角。另外，padding属性可以调整输入框内部内容与边框之间的距离，background-color属性可以设置输入框的背景颜色。

添加阴影效果和过渡动画：

input[type="text"] {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  background-color: #f8f8f8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
}

input[type="text"]:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}