标签:div indent ima 换行 设置 awesome color 技术分享 设计
在网页设计中由于无法设置input框的样式很多时候会使用图片代替,今天在《css揭秘》一书中看到关于input样式框的修改,感觉很有启发,所以提供给广大开发者,希望有所帮助。
具体思路使用一个label标签来将input复选框给遮盖住,同时使用input的checked属性实现样式变换。
css代码
input+.label:before { display: inline-block; margin-right: 5px; content: "\a0"; /*不换行空格*/ width: 15px; height: 15px; background: silver; border-radius: 3px; text-indent: 2px; line-height: 15px; } input:checked+.label:before{ content:"\2713"; background:yellowgreen; } input { position: absolute; clip: rect(0,0,0,0); }
html代码
<div> <input type="checkbox" id="awesome" /> <label class="label" for="awesome">Awesome!</label> <input type="checkbox" id="awesome2" /> <label class="label" for="awesome2">Awesome2!</label> <input type="checkbox" id="awesome3" /> <label class="label" for="awesome3">Awesome3!</label> </div>
标签:div indent ima 换行 设置 awesome color 技术分享 设计
原文地址:http://www.cnblogs.com/shengliang74/p/6158639.html