CSS 样式化除复选框和单选框外的所有输入框

在本文中，我们将介绍如何使用CSS为除复选框和单选框外的所有输入框设置样式。复选框和单选框有特殊的样式设置方式，因此我们将专门介绍除这两种输入框外的其它类型。

阅读更多：CSS 教程

文本框

文本框是Web表单中最常见的输入框类型之一。我们可以利用CSS来美化文本框的外观。下面是一个示例代码，演示如何设置文本框的样式：

<label for="name">姓名:</label>
<input type="text" id="name" name="name" placeholder="请输入您的姓名">

input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  font-size: 16px;
  color: #333;
}

上述代码中，我们通过选择器input[type="text"]选择了所有type属性值为”text”的输入框。接下来，我们为这些文本框设置了一些样式，包括内边距、边框、边框圆角、阴影、轮廓线、字体大小和文字颜色。

文本域

文本域是用于输入多行文本的输入框类型。与文本框类似，我们可以使用CSS设置文本域的样式。下面是一个示例代码，展示如何为文本域设置样式：

<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" placeholder="请留下您的留言"></textarea>

textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  font-size: 16px;
  color: #333;
}

上述代码中，我们选择了所有的textarea元素，并为其设置了一些样式，包括内边距、边框、边框圆角、阴影、轮廓线、字体大小和文字颜色。

下拉菜单

下拉菜单是一种常见的选择输入框。我们可以使用CSS为下拉菜单设置样式。以下是一个示例代码，展示如何为下拉菜单设置样式：

<label for="country">国家:</label>
<select id="country" name="country">
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="uk">英国</option>
</select>

select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  font-size: 16px;
  color: #333;
}

上述代码中，我们选择了所有的select元素，并为其设置了一些样式，包括内边距、边框、边框圆角、阴影、轮廓线、字体大小和文字颜色。

按钮

按钮是Web表单中的重要组成部分。我们可以使用CSS为按钮设置样式。以下是一个示例代码，展示如何为按钮设置样式：

<button type="submit">提交</button>

button {
  padding: 10px 20px;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

上述代码中，我们选择了所有的button元素，并为其设置了一些样式，包括内边距、背景颜色、边框、边框圆角、文字颜色、字体大小和鼠标样式。