W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 表单(Form)



一个HTML表单可以通过CSS大大提高外观:

尝试一下 »

输入字段样式

使用 width 属性可以指定输入字段的宽度。

Example

input {
    width: 100%;
}
尝试一下 »

上面的例子适用于所有 <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 属性添加圆角:

Example

input[type=text] {
    border: 2px solid red;
    border-radius: 4px;
}
尝试一下 »

如果只需要底部边框,请使用 border-bottom 属性:

Example

input[type=text] {
    border: none;
    border-bottom: 2px solid red;
}
尝试一下 »

颜色输入

使用 background-color 属性可以给输入字段添加背景颜色,使用 color 属性可以改变文本的颜色:

Example

input[type=text] {
    background-color: #3CBC8D;
    color: white;
}
尝试一下 »

焦点输入

默认情况下,当输入时一些浏览器在输入字段周围将增加一个蓝色的轮廓,它得到焦点(点击)。你可以使用 outline: none; 删除这些行为:

使用 :focus 选择器在输入焦点时输入字段做一些事情:

Example

input[type=text]:focus {
    background-color: lightblue;
}
尝试一下 »

Example

input[type=text]:focus {
    border: 3px solid #555;
}
尝试一下 »

带有图标/图片的输入

如果要在输入字段中使用图标,请使用 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 按钮教程