input【type="checkbox"】标…
2018-06-24 01:11:17来源：未知 阅读 ()
今天分享一个比较实用的技巧，在实际项目中我们会经常遇到表单的input标签多选和单选的问题，但是往往由于标签自身的样式和我们项目的风格很不搭调，就不能实现了，今天就来告诉大家怎么去实现吧。
第一种：利用伪类：（开源中国）
需要注意的是：在页面布局中，还是有input【type=checkbox】的：
它的样式如下所示：
后面就是通过js脚本来控制它去实现了；
第二种：采用图片
这是一个树形控件zTree
注意事项：图片最好做好两种状态图，并且合并成精灵图，注意类名的应用，指引入一次，后面的修改background-position: 0 0;就可以了；
第三种:下面推荐3种方法实现checkbox/input文本框与文字对齐:
1.使用css实现文本对齐:
<input type="checkbox" class="vat"><label class="vat">这是文字</label>
注意:不要随意加样式添加在行内,不方便后期的样式管理.
.vat{vertical-align:top}
2.使用label中的for属性对齐
<input type="checkbox" id="more" /> <label for="more">对齐是想要的效果</label>
3.使用label包裹整个input和文字
<label><input type="radio"/>男</label>
参考原博文地址:http://www.cnblogs.com/bubuchu/p/6079862.html
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：为样式找到应用目标-CSS选择器
- 美化博客园样式 2020-05-17
- How to Create Responsive Tables using CSS without &l 2020-04-30
- 【Vue】基础（数据 & 计算属性 & 方法） 2020-04-22
- 1.图片元素<img>和<map>的联用 2020-04-07
- 表单元素 2020-04-05
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
