HTML表单的外观可以用CSS大大提高：
造型输入字段
使用width属性来确定输入栏的宽度：
上面的例子适用于所有<input>元素。 如果你只想风格特定输入类型，你可以使用属性选择：
-
input[type=text]-将只选择文本字段 -
input[type=password]-将只选择密码字段 -
input[type=number]-将只选择一些领域 - 等等..
加厚输入
使用padding属性添加文本字段内部空间。
提示：当您以后彼此有很多的投入，你可能还需要增加一些margin ，给他们之外增加更多的空间：
 | 请注意，我们已经设置了box-sizing属性border-box 。 这可以确保在填充和最终的边界都包含在元素的总宽度和高度。 了解更多关于 box-sizing在我们的财产CSS3框大小调整的篇章。 |
|---|
界定输入
使用border属性来更改边框的大小和颜色，并使用border-radius属性添加圆角：
如果你只想要一个底部边框，使用border-bottom性质：
彩色输入
使用background-color属性添加背景颜色的输入端，而color属性来更改文本颜色：
聚焦输入
默认情况下，一些浏览器将添加一个蓝色的轮廓周围的输入时，它获得焦点（点击）。 您可以删除通过添加这种行为outline: none;到输入端。
使用:focus选择做一些与输入字段，当它获得焦点：
输入使用图标/图片
如果你想输入一个内部图标，使用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;
} 试一试» 动画搜索输入
在这个例子中，我们使用CSS3 transition性质的动画时，它获得焦点搜索输入的宽度。 您将了解更多有关transition性质后，在我们的CSS3过渡章节。
例
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} 试一试» 文本域样式
提示：使用resize属性来防止文字区域被调整（禁止在右下角的“抓取”）：
例
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
{
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;
}
/* Tip: use width: 100% for full-width buttons */ 试一试» 有关如何式按键与CSS的更多信息，请阅读我们的CSS教程按钮 。