CSS 表单

CSS 表单

一个表单案例，我们使用 CSS 来渲染 HTML 的表单元素：

CSS 实例

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;
}

输入框(input) 样式

使用 width 属性来设置输入框的宽度：

CSS 实例

input {
width: 100%;
}

以上实例中设置了所有 元素的宽度为 100%，如果你只想设置指定类型的输入框可以使用以下属性选择器：

input[type=text]

input[type=password]

input[type=number]

输入框填充

使用

padding

CSS 实例

input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}

注意我们设置了

box-sizing

border-box

如果你只想添加底部边框可以使用

border-bottom

CSS 实例

input[type=text] {
border: none;
border-bottom: 2px solid red;
}

输入框(input) 颜色

可以使用

background-color

color

CSS 实例

input[type=text] {
background-color: #3CBC8D;
color: white;
}

输入框(input) 聚焦

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