入门 CSS 输入表单

在 Web 开发中，表单是一个非常常见的元素，它通常被用来让用户输入或者提交数据，比如注册表单、搜索框、评论框等等。对于这些表单元素，CSS 可以帮助我们实现更加美观和功能更强大的样式效果。

基础样式设置

要对表单元素进行样式设置，我们需要先对它们进行选择。HTML 中表单元素的选择器有很多种，比如 input、select、textarea 等等。下面是一个例子，我们尝试设置一个文本输入框的样式：

input[type=text] {
  font-size: 16px;
  color: #333;
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 4px;
}

以上代码会让我们的文本输入框显示为一个具有边框圆角、内部文字大小为 16px、颜色为 #333、内部填充为 6px 10px 的矩形框。

状态样式设置

在表单中，元素通常有不同的状态，比如默认状态、已经激活状态、错误状态、禁用状态等等。对于这些不同状态，我们可以使用 CSS 选择器进行样式设置，比如：

input[type=text]:focus {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  border-color: #2ecc71;
}

以上代码会让我们的文本输入框在获取焦点时显示出阴影，并且边框的颜色变为了绿色。

input[type=text]:disabled {
  background-color: #ddd;
  color: #666;
}

以上代码会让我们的文本输入框变为灰色不可用状态，并且内部文字颜色变为了深灰色。

样式设置总结

通过以上这些样式，我们可以让我们的表单元素更加美观和易于使用。下面再给出一些常用的样式设置：

textarea {
  resize: none; /* 禁止调整尺寸 */
}

select {
  appearance: none; /* 去除默认样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 20px; /* 增加右侧图标间距 */
  background-image: url('down-arrow.png');
  background-repeat: no-repeat;
  background-position: right 5px center;
}

input[type=checkbox] {
  -webkit-appearance: none; /* 去除默认样式 */
  padding: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.2s ease;
}

input[type=checkbox]:checked {
  background-color: #2ecc71;
  border-color: #2ecc71;
}

input[type=radio] {
  -webkit-appearance: none; /* 去除默认样式 */
  padding: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.2s ease;
}

input[type=radio]:checked {
  background-color: #2ecc71;
  border-color: #2ecc71;
}

以上是一些常用的样式设置，包括禁止调整尺寸、下拉框增加图标、多选框和单选框的样式等等。通过这些样式设置，我们可以让表单元素更加符合我们的需求和设计。