程序员scholar
  • 前端三剑客
  • CSS
scholar
2024-07-16
目录

CSS 表单样式设置

# CSS 表单样式设置

# 1. 一个完整的表单案例

使用 CSS 渲染 HTML 表单元素的一个完整示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置文本框和下拉菜单样式 */
input[type=text], select {
  width: 100%; /* 设置宽度为100% */
  padding: 12px 20px; /* 设置内边距 */
  margin: 8px 0; /* 设置外边距 */
  display: inline-block; /* 设置为行内块元素 */
  border: 1px solid #ccc; /* 设置边框样式 */
  border-radius: 4px; /* 设置圆角 */
  box-sizing: border-box; /* 包括padding和border */
}

/* 设置提交按钮样式 */
input[type=submit] {
  width: 100%; /* 设置宽度为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>
</head>
<body>

<h3>使用 CSS 来渲染 HTML 的表单元素</h3>

<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

展示效果:

# 2. 输入框(input) 样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置所有 input 元素宽度为 100% */
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

展示效果:

说明: 设置所有 input 元素的宽度为 100%。如果你只想设置特定类型的输入框，可以使用以下属性选择器：

  • input[type=text] - 选择文本输入框
  • input[type=password] - 选择密码输入框
  • input[type=number] - 选择数字输入框

# 3. 输入框填充

使用 padding 属性可以在输入框中添加内边距。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置文本框样式 */
input[type=text] {
  width: 100%; /* 设置宽度为100% */
  padding: 12px 20px; /* 设置内边距 */
  margin: 8px 0; /* 设置外边距 */
  box-sizing: border-box; /* 包括padding和border */
}
</style>
</head>
<body>

<p>设置文本框的内边距:</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

展示效果:

# 4. 输入框边框

使用 border 属性可以修改 input 边框的大小或颜色，使用 border-radius 属性可以给 input 添加圆角。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置文本框样式 */
input[type=text] {
  width: 100%; /* 设置宽度为100% */
  padding: 12px 20px; /* 设置内边距 */
  margin: 8px 0; /* 设置外边距 */
  box-sizing: border-box; /* 包括padding和border */
  border: 2px solid red; /* 设置红色边框 */
  border-radius: 4px; /* 设置圆角 */
}
</style>
</head>
<body>

<p>文本框的边框:</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

展示效果:

如果你只想添加底部边框，可以使用 border-bottom 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置文本框样式 */
input[type=text] {
  width: 100%; /* 设置宽度为100% */
  padding: 12px 20px; /* 设置内边距 */
  margin: 8px 0; /* 设置外边距 */
  box-sizing: border-box; /* 包括padding和border */
  border: none; /* 去除所有边框 */
  border-bottom: 2px solid red; /* 只添加底部边框 */
}
</style>
</head>
<body>

<p>只在文本框底部添加边框:</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

展示效果:

# 5. 输入框颜色

可以使用 background-color 属性来设置输入框的背景颜色，color 属性用于修改文本颜色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置文本框样式 */
input[type=text] {
  width: 100%; /* 设置宽度为100% */
  padding: 12px 20px; /* 设置内边距 */
  margin: 8px 0; /* 设置外边距 */
  box-sizing: border-box; /* 包括padding和border */
  border: none; /* 去除边框 */
  background-color: #3CBC8D; /* 设置背景颜色 */
  color: white; /* 设置文本颜色 */
}
</style>
</head>
<body>

<p>设置输入框颜色:</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

展示效果:

# 6. 输入框聚焦样式

默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们

可以设置 outline: none; 来忽略该效果。使用 :focus 选择器可以设置输入框在获取焦点时的样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置文本框样式 */
input[type=text] {
  width: 100%; /* 设置宽度为100% */
  padding: 12px 20px; /* 设置内边距 */
  margin: 8px 0; /* 设置外边距 */
  box-sizing: border-box; /* 包括padding和border */
  border: 1px solid #555; /* 设置边框 */
  outline: none; /* 去除默认的蓝色轮廓 */
}

/* 设置文本框获取焦点时的样式 */
input[type=text]:focus {
  background-color: lightblue; /* 设置背景颜色为浅蓝色 */
}
</style>
</head>
<body>

<p>在这个实例中，我们使用了 :focus 选择器（点击输入框时）来给文本输入框添加背景颜色:</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

展示效果:

使用 CSS transition 属性可以设置输入框在获取焦点时边框颜色的平滑过渡效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置文本框样式 */
input[type=text] {
  width: 100%; /* 设置宽度为100% */
  padding: 12px 20px; /* 设置内边距 */
  margin: 8px 0; /* 设置外边距 */
  box-sizing: border-box; /* 包括padding和border */
  border: 3px solid #ccc; /* 设置默认边框颜色 */
  -webkit-transition: 0.5s; /* 设置过渡时间 */
  transition: 0.5s; /* 设置过渡时间 */
  outline: none; /* 去除默认的蓝色轮廓 */
}

/* 设置文本框获取焦点时的样式 */
input[type=text]:focus {
  border: 3px solid #555; /* 设置边框颜色为黑色 */
}
</style>
</head>
<body>

<p>在这个实例中，我们使用 :focus 选择器，在文本框获取焦点时，设置文本框的边框颜色为黑色，并设置过渡时间为 0.5 秒。</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

展示效果:

# 7. 输入框中的图标

如果你想在输入框中添加图标，可以使用 background-image 属性和用于定位的 background-position 属性。注意设置图标的左边距，让图标有一定的空间：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置文本框样式 */
input[type=text] {
  width: 100%; /* 设置宽度为100% */
  box-sizing: border-box; /* 包括padding和border */
  border: 2px solid #ccc; /* 设置边框 */
  border-radius: 4px; /* 设置圆角 */
  font-size: 16px; /* 设置字体大小 */
  background-color: white; /* 设置背景颜色 */
  background-image: url('https://static.jyshare.com/libs/images/mix/searchicon.png'); /* 设置背景图片 */
  background-position: 10px 10px; /* 设置背景图片位置 */
  background-repeat: no-repeat; /* 设置背景图片不重复 */
  padding: 12px 20px 12px 40px; /* 设置内边距 */
}
</style>
</head>
<body>

<p>输入框按钮:</p>

<form>
  <input type="text" name="search" placeholder="搜索..">
</form>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

展示效果:

# 8. 带动画的搜索框

以下实例使用了 CSS transition 属性，该属性设置了输入框在获取焦点时会向右延展。你可以在 CSS 动画 (opens new window) 章节查看更多内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置搜索框样式 */
input[type=text] {
  width: 130px; /* 设置宽度为130px */
  box-sizing: border-box; /* 包括padding和border */
  border: 2px solid #ccc; /* 设置边框 */
  border-radius: 4px; /* 设置圆角 */
  font-size: 16px; /* 设置字体大小 */
  background-color: white; /* 设置背景颜色 */
  background-image: url('https://static.jyshare.com/libs/images/mix/searchicon.png'); /* 设置背景图片 */
  background-position: 10px 10px; /* 设置背景图片位置 */
  background-repeat: no-repeat; /* 设置背景图片不重复 */
  padding: 12px 20px 12px 40px; /* 设置内边距 */
  -webkit-transition: width 0.4s ease-in-out; /* 设置宽度过渡效果 */
  transition: width 0.4s ease-in-out; /* 设置宽度过渡效果 */
}

/* 设置搜索框获取焦点时的样式 */
input[type=text]:focus {
  width: 100%; /* 设置宽度为100% */
}
</style>
</head>
<body>

<p>搜索输入框带动画:</p>

<form>
  <input type="text" name="search" placeholder="搜索..">
</form>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

展示效果:

# 9. 文本框（textarea）样式

注意: 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置文本框样式 */
textarea {
  width: 100%; /* 设置宽度为100% */
  height: 150px; /* 设置高度为150px */
  padding: 12px 20px; /* 设置内边距 */
  box-sizing: border-box; /* 包括padding和border */
  border: 2px solid #ccc; /* 设置边框 */
  border-radius: 4px; /* 设置圆角 */
  background-color: #f8f8f8; /* 设置背景颜色 */
  font-size: 16px; /* 设置字体大小 */
  resize: none; /* 禁用文本框的拖动调整大小功能 */
}
</style>
</head>
<body>

<p><strong>提示:</strong> 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下脚可以重置大小）。</p>

<form>
  <textarea>一些文本...</textarea>
</form>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

展示效果:

# 10. 下拉菜单（select）样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置下拉菜单样式 */
select {
  width: 100%; /* 设置宽度为100% */
  padding: 16px 20px; /* 设置内边距 */
  border: none; /* 去除边框 */
  border-radius: 4px; /* 设置圆角 */
  background-color: #f1f1f1; /* 设置背景颜色 */
}
</style>
</head>
<body>

<p>下拉菜单</p>

<form>
  <select id="country" name="country">
    <option value="australia">Australia</option>
    <option value="canada">Canada</option>


    <option value="usa">USA</option>
  </select>
</form>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

展示效果:

# 11. 按钮样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

展示效果:

# 12. 响应式表单

响应式表单可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 全局样式设置，设置盒模型，包含padding和border */
* {
  box-sizing: border-box;
}

/* 设置表单元素样式 */
input[type=text], select, textarea {
  width: 100%; /* 设置宽度为100% */
  padding: 12px; /* 设置内边距 */
  border: 1px solid #ccc; /* 设置边框 */
  border-radius: 4px; /* 设置圆角 */
  resize: vertical; /* 允许垂直方向调整大小 */
}

/* 设置标签样式 */
label {
  padding: 12px 12px 12px 0; /* 设置内边距 */
  display: inline-block; /* 设置为行内块元素 */
}

/* 设置提交按钮样式 */
input[type=submit] {
  background-color: #4CAF50; /* 设置背景颜色 */
  color: white; /* 设置文字颜色 */
  padding: 12px 20px; /* 设置内边距 */
  border: none; /* 去除边框 */
  border-radius: 4px; /* 设置圆角 */
  cursor: pointer; /* 设置鼠标指针样式 */
  float: right; /* 设置浮动方向 */
}

/* 提交按钮悬停样式 */
input[type=submit]:hover {
  background-color: #45a049;
}

/* 设置表单容器样式 */
.container {
  border-radius: 5px; /* 设置圆角 */
  background-color: #f2f2f2; /* 设置背景颜色 */
  padding: 20px; /* 设置内边距 */
}

/* 设置列样式 */
.col-25 {
  float: left; /* 设置浮动方向 */
  width: 25%; /* 设置宽度 */
  margin-top: 6px; /* 设置外边距 */
}

.col-75 {
  float: left; /* 设置浮动方向 */
  width: 75%; /* 设置宽度 */
  margin-top: 6px; /* 设置外边距 */
}

/* 清除浮动 */
.row:after {
  content: ""; /* 清除浮动 */
  display: table;
  clear: both;
}

/* 响应式布局，屏幕宽度小于600px时，元素宽度设置为100%，并取消外边距 */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%; /* 设置宽度为100% */
    margin-top: 0; /* 取消外边距 */
  }
}
</style>
</head>
<body>

<h2>响应式表单</h2>
<p>响应式表单可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：</p>

<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    </div>
  </div>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

展示效果:

编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05
CSS 伪类和伪元素
CSS !important 规则

← CSS !important 规则→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar