HoRain云--CSS 表单

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