CSS 表单
-
input字段样式
使用width属性确定输入字段的宽度:
尝试一下input { width: 100%; }
上面的示例适用于所有<input>元素。如果您只想设置特定输入类型的样式,则可以使用属性选择器:
- input[type=text] - 只会选择文本字段
- input[type=password] - 只会选择密码字段
- input[type=number] - 只会选择数字字段
-
input内边距(padding)
使用padding属性在文本字段中添加空格。提示:当您有许多输入后,您可能还想添加一些margin,以在它们之外添加更多空间:
尝试一下input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; }
请注意,我们已将box-sizing属性设置为border-box。这可确保填充和最终边框包含在元素的总宽度和高度中。
-
-
input彩色
使用background-color属性为输入添加背景颜色,使用color属性更改文本颜色:
尝试一下input[type=text] { background-color: #3CBC8D; color: white; }
-
-
input图标/图像
如果要在输入中包含图标,请使用background-image属性并将其与background-position属性一起定位。另请注意,我们添加了一个大的左边距以保留图标的空间:
尝试一下input[type=text] { background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding-left: 40px; }
-
input动画搜索
在此示例中,我们使用CSS transition属性在焦点获得焦点时为搜索输入的宽度设置动画。
尝试一下input[type=text] { -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; }
-
textarea样式
提示:使用resize属性可以防止调整textareas的大小(禁用右下角的“抓取器”):
尝试一下textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; resize: none; }
-
select样式
尝试一下select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; }
-
按钮样式
尝试一下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; } /* 提示:使用width:100%的全宽度按钮 */
-
响应表单
调整浏览器窗口的大小以查看效果。当屏幕宽度小于600px时,使两列堆叠在一起,而不是彼此相邻。
高级:以下示例使用媒体查询来创建响应式表单。您将在后面的章节中了解更多相关信息。
尝试一下@media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } }