CSS 表单(Form)
一个HTML表单可以通过CSS大大提高外观:
输入字段样式
使用 width
属性可以指定输入字段的宽度。
上面的例子适用于所有 <input> 元素。如果你只想对一个特定的输入字段设定样式,你可以使用属性选择器:
input[type=text]
- 只会选择文本字段input[type=password]
- 只会选择密码字段input[type=number]
- 只会选择数字字段- 等等...
填充输入
使用 padding
属性在文本字段中添加空格。
提示: 当你有许多输入后,你可能还想添加一些 margin
,以增加更多的空间:
Example
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
尝试一下 »
边框输入
使用 border
属性更改边框大小和颜色,使用 border-radius
属性添加圆角:
如果只需要底部边框,请使用 border-bottom
属性:
颜色输入
使用 background-color
属性可以给输入字段添加背景颜色,使用 color
属性可以改变文本的颜色:
焦点输入
默认情况下,当输入时一些浏览器在输入字段周围将增加一个蓝色的轮廓,它得到焦点(点击)。你可以使用 outline: none;
删除这些行为:
使用 :focus
选择器在输入焦点时输入字段做一些事情:
带有图标/图片的输入
如果要在输入字段中使用图标,请使用 background-image
属性并将其与 background-position
位置属性定位。还要注意,我们添加了一个大的左填充保留图标的空间:
Example
input[type=text]
{
background-color: white;
background-image: url('http://ojaos57mw.bkt.clouddn.com/searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
尝试一下 »
带有动画的查找输入
在这个例子中我们使用CSS3 transition
属性改变输入框的宽度在搜索输入框得到焦点时。你可以学习更多的
transition
属性, 在我们的 CSS3 过渡效果 一章中。
Example
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
尝试一下 »
Textareas
提示: 使用 resize
防止文本区域被调整:
Example
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
尝试一下 »
选择菜单
Example
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
尝试一下 »
输入按钮
Example
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;
}
/* Tip: use width: 100% for full-width buttons */
尝试一下 »
有关如何使用CSS样式按钮的更多信息,请阅读我们的CSS 按钮教程。