|
|
CSS 表单
一个表单案例，我们使用 CSS 来渲染 HTML 的表单元素： CSS 范例input [ type = text ] , select {
width: 100 % ;
padding: 12 px 20 px ;
margin: 8 px 0 ;
display: inline-block ;
border: 1 px solid #ccc ;
border-radius: 4 px ;
box-sizing: border-box ;
}
input [ type = submit ] {
width: 100 % ;
background-color: #4CAF50 ;
color: white ;
padding: 14 px 20 px ;
margin: 8 px 0 ;
border: none ;
border-radius: 4 px ;
cursor: pointer ;
}
input [ type = submit ] :hover {
background-color: #45a049 ;
}
div {
border-radius: 5 px ;
background-color: #f2f2f2 ;
padding: 20 px ;
} |
输入框(input) 样式 使用 width 属性来设置输入框的宽度： CSS 范例
以上范例中设置了所有 <input> 元素的宽度为 100%，如果你只想设置指定类型的输入框可以使用以下属性选择器： - input[type=text] - 选取文本输入框
- input[type=password] - 选择密码的输入框
- input[type=number] - 选择数字的输入框
- ...
输入框填充 使用 padding 属性可以在输入框中添加内边距。 CSS 范例input [ type = text ] {
width: 100 % ;
padding: 12 px 20 px ;
margin: 8 px 0 ;
box-sizing: border-box ;
} |
注意我们设置了 box-sizing 属性为 border-box。这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。 输入框(input) 边框 使用 border 属性可以修改 input 边框的大小或颜色，使用 border-radius 属性可以给 input 添加圆角： CSS 范例input [ type = text ] {
border: 2 px solid red ;
border-radius: 4 px ;
}
如果你只想添加底部边框可以使用 border-bottom 属性: CSS 范例input [ type = text ] {
border: none ;
border-bottom: 2 px solid red ;
} 输入框(input) 颜色 可以使用 background-color 属性来设置输入框的背景颜色， color 属性用于修改文本颜色： CSS 范例input [ type = text ] {
background-color: #3CBC8D ;
color: white ;
} 输入框(input) 聚焦 默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 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 范例 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% 设置全宽按钮 */ 响应式表单 响应式表单可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：
高级: 以下范例使用了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 ;
}
} |
程序猿的技术大观园：www.javathinker.net
[这个贴子最后由 admin 在 2020-02-01 15:42:16 重新编辑]
|
|
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → CSS 表单的用法
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密
