码迷,mamicode.com
首页 > 其他好文 > 详细

改变input复选框样式

时间:2016-12-11 02:39:53      阅读:167      评论:0      收藏:0      [点我收藏+]

标签: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>

 

改变input复选框样式

标签:div   indent   ima   换行   设置   awesome   color   技术分享   设计   

原文地址:http://www.cnblogs.com/shengliang74/p/6158639.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!