|
|
相关文章推荐
注意我们设置了
box-sizing
属性为
border-box
。这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。
更多内容可以阅读
CSS3 框大小
。
输入框(input) 边框
使用
border
属性可以修改 input 边框的大小或颜色，使用
border-radius
属性可以给 input 添加圆角：
CSS 实例
input
[
type
=
text
]
{
border:
2
px
solid
red
;
border-radius:
4
px
;
尝试一下 »
尝试一下 »
如果你只想添加底部边框可以使用
border-bottom
属性:
默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为
outline: none;
来忽略该效果。
使用
:focus
选择器可以设置输入框在获取焦点时的样式：
CSS 实例
input
[
type
=
text
]
:focus
{
background-color:
lightblue
;
尝试一下 »
尝试一下 »
CSS 实例
input
[
type
=
text
]
:focus
{
border:
3
px
solid
#555
;
尝试一下 »
尝试一下 »
输入框(input) 图标
如果你想在输入框中添加图标，可以使用
background-image
属性和用于定位的
background-position
属性。注意设置图标的左边距，让图标有一定的空间：
CSS 实例
input
[
type
=
text
]
{
background-color:
white
;
background-image:
url
('
searchicon
.
png
')
;
background-position:
10
px
10
px
;
background-repeat:
no-repeat
;
padding-left:
40
px
;
尝试一下 »
尝试一下 »
带动画的搜索框
以下实例使用了 CSS
transition
属性，该属性设置了输入框在获取焦点时会向右延展。你可以在
CSS 动画
章节查看更多内容。
CSS 实例
input
[
type
=
text
]
{
-
webkit-transition:
width
0.4
s
ease-in-out
;
transition:
width
0.4
s
ease-in-out
;
input
[
type
=
text
]
:focus
{
width:
100
%
;
尝试一下 »
尝试一下 »
文本框（textarea）样式
注意:
使用
resize
属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。
CSS 实例
textarea
{
width:
100
%
;
height:
150
px
;
padding:
12
px
20
px
;
box-sizing:
border-box
;
border:
2
px
solid
#ccc
;
border-radius:
4
px
;
background-color:
#f8f8f8
;
resize:
none
;
尝试一下 »
尝试一下 »
下拉菜单（select）样式
CSS 实例
select
{
width:
100
%
;
padding:
16
px
20
px
;
border:
none
;
border-radius:
4
px
;
background-color:
#f1f1f1
;
尝试一下 »
尝试一下 »
尝试一下 »
尝试一下 »
CSS 实例
input
[
type
=
button
]
,
input
[
type
=
submit
]
,
input
[
type
=
reset
]
{
background-color:
#4CAF50
;
border:
none
;
color:
white
;
padding:
16
px
32
px
;
text-decoration:
none
;
margin:
4
px
2
px
;
cursor:
pointer
;
/*
提示: 使用 width: 100% 设置全宽按钮
*/
尝试一下 »
更多内容可以参考我们的 CSS 按钮 教程。
响应式表单
响应式表单可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：
高级: 以下实例使用了 CSS3 多媒体查询 来创建一个响应式表单。
CSS 实例
box-sizing: border-box ; input [ type = text ] , select , textarea { width: 100 % ; padding: 12 px ; border: 1 px solid #ccc ; border-radius: 4 px ; resize: vertical ; label { padding: 12 px 12 px 12 px 0 ; display: inline-block ; input [ type = submit ] { background-color: #4CAF50 ; color: white ; padding: 12 px 20 px ; border: none ; border-radius: 4 px ; cursor: pointer ; float: right ; input [ type = submit ] :hover { background-color: #45a049 ; .container { border-radius: 5 px ; background-color: #f2f2f2 ; padding: 20 px ; .col-25 { float: left ; width: 25 % ; margin-top: 6 px ; .col-75 { float: left ; width: 75 % ; margin-top: 6 px ; /* 清除浮动 */ .row :after { content: "" ; display: table ; clear: both ; /* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */ @media screen and (max-width: 600 px ) { .col-25 , .col-75 , input [ type = submit ] { width: 100 % ; margin-top: 0 ;尝试一下 »
推荐文章