小白教程
所有教程
关于
Search
172.70.130.248
172.70.130.248
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS 表单”的源代码
本页内容
上一节:
CSS_属性选择器
下一节:
CSS_计数器
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS 表单}}[[Category:CSS 教程|35]] = CSS 表单 = 一个表单案例,我们使用 CSS 来渲染 HTML 的表单元素: == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <style> input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } </style> <body> <h3>使用 CSS 来渲染 HTML 的表单元素</h3> <div> <form action="/action_page.php"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> <label for="country">Country</label> <select id="country" name="country"> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="usa">USA</option> </select> <input type="submit" value="Submit"> </form> </div> </body> </html> </run> == 输入框(input) 样式 == 使用 width 属性来设置输入框的宽度: == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> input { width: 100%; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> input { width: 100%; } </style> </head> <body> <p>全宽输入框:</p> <form> <label for="fname">First Name</label> <input type="text" id="fname" name="fname"> </form> </body> </html> </run> 以上实例中设置了所有 <input> 元素的宽度为 100%,如果你只想设置指定类型的输入框可以使用以下属性选择器: * <code>input[type=text]</code> - 选取文本输入框 * <code>input[type=password]</code> - 选择密码的输入框 * <code>input[type=number]</code> - 选择数字的输入框 * ... == 输入框填充 == 使用 '''padding''' 属性可以在输入框中添加内边距。 == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; } </style> </head> <body> <p>设置文本框的内边距:</p> <form> <label for="fname">First Name</label> <input type="text" id="fname" name="fname"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lname"> </form> </body> </html> </run> 注意我们设置了 <code>box-sizing</code> 属性为 <code>border-box</code>。这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。 更多内容可以阅读 [[css3 box sizing|CSS3 框大小]] 。 == 输入框(input) 边框 == 使用 <code>border</code> 属性可以修改 input 边框的大小或颜色,使用 <code>border-radius</code> 属性可以给 input 添加圆角: == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> input[type=text] { border: 2px solid red; border-radius: 4px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid red; border-radius: 4px; } </style> </head> <body> <p>文本框的边框:</p> <form> <label for="fname">First Name</label> <input type="text" id="fname" name="fname"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lname"> </form> </body> </html> </run> 如果你只想添加底部边框可以使用 <code>border-bottom</code> 属性: == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> input[type=text] { border: none; border-bottom: 2px solid red; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: none; border-bottom: 2px solid red; } </style> </head> <body> <p>只在文本框底部添加边框:</p> <form> <label for="fname">First Name</label> <input type="text" id="fname" name="fname"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lname"> </form> </body> </html> </run> == 输入框(input) 颜色 == 可以使用 <code>background-color</code> 属性来设置输入框的背景颜色,<code>color</code> 属性用于修改文本颜色: == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> input[type=text] { background-color: #3CBC8D; color: white; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: none; background-color: #3CBC8D; color: white; } </style> </head> <body> <p>设置输入框颜色:</p> <form> <label for="fname">First Name</label> <input type="text" id="fname" name="fname" value="John"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lname" value="Doe"> </form> </body> </html> </run> == 输入框(input) 聚焦 == 默认情况下,一些浏览器在输入框获取焦点时(点击输入框)会有一个蓝色轮廓。我们可以设置 input 样式为 <code>outline: none;</code> 来忽略该效果。 使用 <code>:focus</code> 选择器可以设置输入框在获取焦点时的样式: == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> input[type=text]:focus { background-color: lightblue; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 1px solid #555; outline: none; } input[type=text]:focus { background-color: lightblue; } </style> </head> <body> <p>在这个实例中,我们使用了 :focus 选择器(点击输入框时)来给文本输入框添加背景颜色:</p> <form> <label for="fname">First Name</label> <input type="text" id="fname" name="fname" value="John"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lname" value="Doe"> </form> </body> </html> </run> == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> input[type=text]:focus { border: 3px solid #555; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 3px solid #ccc; -webkit-transition: 0.5s; transition: 0.5s; outline: none; } input[type=text]:focus { border: 3px solid #555; } </style> </head> <body> <p>在这个实例,我们使用 :focus 选择器,在文本框获取焦点时,设置文本框当边框颜色为黑色。</p> <p>注意,我们使用来 CSS transition 属性来设置边框当颜色 (在 0.5 秒内修改边框当颜色)。</p> <form> <label for="fname">First Name</label> <input type="text" id="fname" name="fname" value="John"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lname" value="Doe"> </form> </body> </html> </run> == 输入框(input) 图标 == 如果你想在输入框中添加图标,可以使用 <code>background-image</code> 属性和用于定位的<code>background-position</code> 属性。注意设置图标的左边距,让图标有一定的空间: == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> input[type=text] { background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding-left: 40px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> input[type=text] { width: 100%; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('http://static.xiaobai.wang/images/mix/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; } </style> </head> <body> <p>输入框按钮:</p> <form> <input type="text" name="search" placeholder="搜索.."> </form> </body> </html> </run> == 带动画的搜索框 == 以下实例使用了 CSS <code>transition</code> 属性,该属性设置了输入框在获取焦点时会向右延展。你可以在 [[css3 animations|CSS 动画]] 章节查看更多内容。 == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> input[type=text] { -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> input[type=text] { width: 130px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('http://static.xiaobai.wang/images/mix/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; } </style> </head> <body> <p>搜索输入框带动画:</p> <form> <input type="text" name="search" placeholder="搜索.."> </form> </body> </html> </run> == 文本框(textarea)样式 == '''注意:''' 使用 <code>resize</code> 属性来禁用文本框可以重置大小的功能(一般拖动右下角可以重置大小)。 == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; resize: none; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; font-size: 16px; resize: none; } </style> </head> <body> <p><strong>提示:</strong> 使用 resize 属性来禁用文本框可以重置大小的功能(一般拖动右下脚可以重置大小)。</p> <form> <textarea>一些文本...</textarea> </form> </body> </html> </run> == 下拉菜单(select)样式 == == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; } </style> </head> <body> <p>下拉菜单</p> <form> <select id="country" name="country"> <option value="au">Australia</option> <option value="ca">Canada</option> <option value="usa">USA</option> </select> </form> </body> </html> </run> == 按钮样式 == == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> 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; } /* 提示: 使用 width: 100% 设置全宽按钮 */ </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> 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; } </style> </head> <body> <p>按钮样式</p> <input type="button" value="按钮"> <input type="reset" value="重置"> <input type="submit" value="提交"> </body> </html> </run> 更多内容可以参考我们的 [[css3 buttons|CSS 按钮]] 教程。 == 响应式表单 == 响应式表单可以根据浏览器窗口的大小重新布局各个元素,我们可以通过重置浏览器窗口大小来查看效果: '''高级:''' 以下实例使用了[[css3 mediaqueries|CSS3 多媒体查询]] 来创建一个响应式表单。 == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> * { box-sizing: border-box; } input[type=text], 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[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } input[type=submit]: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[type=submit] { width: 100%; margin-top: 0; } } </sample> <run name=""> <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } input[type=text], 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[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } input[type=submit]: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[type=submit] { width: 100%; margin-top: 0; } } </style> </head> <body> <h2>响应式表单</h2> <p>响应式表带可以根据浏览器窗口的大小重新布局各个元素,我们可以通过重置浏览器窗口大小来查看效果:</p> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-25"> <label for="fname">First Name</label> </div> <div class="col-75"> <input type="text" id="fname" name="firstname" placeholder="Your name.."> </div> </div> <div class="row"> <div class="col-25"> <label for="lname">Last Name</label> </div> <div class="col-75"> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> </div> </div> <div class="row"> <div class="col-25"> <label for="country">Country</label> </div> <div class="col-75"> <select id="country" name="country"> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="usa">USA</option> </select> </div> </div> <div class="row"> <div class="col-25"> <label for="subject">Subject</label> </div> <div class="col-75"> <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea> </div> </div> <div class="row"> <input type="submit" value="Submit"> </div> </form> </div> </body> </html> </run>
返回至“
CSS 表单
”。
上一节:
CSS_属性选择器
下一节:
CSS_计数器