第 8 章: 表单效果
8.1 深入 radio(单选框)和 checkbox(复选框)
开发页面表单经常遇到的一个问题就是, 单 / 复选框与文字垂直居中不对齐, 这是因为单 / 复选框与文字默认以
vertical-align:baseline
方式垂直对齐的
解决方法也很简单, 根据元素的 font-size, 通过调整单 / 复选框的 vertical-align 向下偏移即可
8.2 深入 textarea(多行文本框)
8.2.1 textarea 固定大小并禁止拖动
- <style type="text/css">
- /* 方式一: 通过限制最大宽度和高度来限定拖动, 右下角的图标还在 */
- textarea.settingMax{
- max-width: 200px;
- max-height: 100px;
- }
- /* 方式二: 通过 resize:none 彻底禁用拖动, 右下角图标不在 */
- textarea.disableSize{
- resize: none;
- }
- /* 方法三: 通过固定宽高限制多行文本框, 右下角图标还在 */
- textarea.settingSize{
- width: 200px;
- height: 100px;
- max-width: 200px;
- max-height: 100px;
- min-width: 200px;
- min-height: 100px;
- }
- </style>
- <textarea class="settingMax" cols="20" rows="3"></textarea>
- <textarea class="disableSize" cols="20" rows="3"></textarea>
- <textarea class="settingSize" cols="20" rows="3"></textarea>
8.2.2 textarea 在不同浏览器内核保持外观一致
不同的浏览器下多行文本框的外观显示不一致, 主要有两种情况:
textarea 可以通过 cols 和 rows 属性来控制多行文本框的列数和行数, 但 IE 和 Chrome/Firefox 浏览器上, 显示的行数和列数是不一样的;
另外, 默认情况 IE 浏览器下显示多行文本框有滚动条, 而 Chrome 和 Firefox 下不显示滚动条;
- textarea{
- /* 第一步: 通过宽高定义 textarea 的大小 */
- width: 200px;
- height: 100px;
- /* 第二步: 通过设置 overflow 属性定义 textarea 滚动条自适应 */
- overflow: auto;
- }
8.3 实现表单对齐
表单对齐是前端开发经常遇到的, 很多大型网站包括百度京东腾讯已经有了成熟的解决方案:
把表单每一行分为左右两栏的布局保持左侧栏的元素 (通常只有 < label > 标签) 长度一样, 并保持右侧所有元素的总长度一样最后每一行的总长度一样;
设置左侧的元素 text-align:right 文本居右;
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title > 登陆</title>
- <style type="text/css">
- form{
- width: 320px;
- font-family: arial;
- font-size: 14px;
- font-weight: bold;
- }
- p{overflow: hidden;}
- label{
- float: left;
- width: 60px;
- height: 20px;
- line-height: 20px;
- text-align: right;
- padding-right: 10px;
- }
- input{
- float: left;
- height: 15px;
- padding: 5px;
- border: 1px solid silver;
- }
- #phone,#password{
- width: 228px;
- }
- #verifyCode{
- width: 118px;
- margin-right: 10px;
- }
- #verifyCodeBtn{
- width: 100px;
- height: 26px;
- border: 1px solid gray;
- background-color: #F1F1F1;
- }
- #submitBtn{
- height: 26px;
- width: 300px;
- margin: 10px;
- }
- </style>
- </head>
- <body>
- <form action=""method="post">
- <p>
- <!-- 60px + 10px + 228px = 298px -->
- <label for="phone">手机号</label>
- <input type="text" id="phone" />
- </p>
- <p>
- <!-- 60px + 10px + 228px = 298px -->
- <label for="password">密码</label>
- <input type="password" id="password" />
- </p>
- <p>
- <!-- 60px + 10px + 118px + 10px + 100px = 298px -->
- <label for="verifyCode">验证码</label>
- <input type="text" id="verifyCode" />
- <input type="button" value="提交" id="verifyCodeBtn" />
- </p>
- <input type="submit" id="submitBtn" value="登陆"/>
- </form>
- </body>
- </html>
来源: http://www.jianshu.com/p/ed558eb9603c