CSS 表单

通过使用 CSS，可以极大地改善 HTML 表单的外观：

完整代码如下：

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: #45a049;
}
div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>
<h3>在 HTML 的表单中应用 CSS 样式</h3>
<div>
  <form action="/example/html/action_page.ashx">
    <label for="fname">姓氏</label>
  <input type="text" id="fname" name="firstname" placeholder="你的姓氏..">
  <label for="lname">名字</label>
  <input type="text" id="lname" name="lastname" placeholder="你的名字..">
  <label for="country">国家</label>
  <select id="country" name="country">
    <option value="usa">澳大利亚</option>
    <option value="usa">加拿大</option>
    <option value="usa">美国</option>
  </select>
  <input type="submit" value="提交">
  </form>
</div>
</body>
</html>

运行一下

设置输入字段的样式

使用 width 属性来确定输入字段的宽度：

实例

<!DOCTYPE html>
<html>
<head>
<style>
input {
  width: 100%;
}
</style>
</head>
<body>
<p>全宽的输入字段：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
</form>
</body>
</html>

运行一下

上例适用于所有 <input> 元素。如果只想设置特定输入类型的样式，则可以使用属性选择器：

input[type=text] - 将仅选择文本字段
input[type=password] - 将仅选择密码字段
input[type=number] - 将仅选择数字字段等等…

有关如何使用 CSS 设置输入框样式的更多信息，请访问本站的 CSS 输入框样式教程。

设置按钮样式

实例

<!DOCTYPE html>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>
<p>按钮样式。</p>
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
</body>
</html>

运行一下

有关如何使用 CSS 设置按钮样式的更多信息，请访问本站的 CSS 按钮样式教程。

CSS 表单

设置输入字段的样式

实例

设置按钮样式

实例

分类导航