2 the dead the_dead 于 2015.07.28 08:51 提问

利用css修改复选框的样式做出如下的样式
css

图片说明

5个回答

showbo
showbo   Ds   Rxr 2015.07.28 10:13
已采纳

你这个单css搞不了,要结合js


<!doctype html>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
<style>
    ul,li{list-style:none;padding:0px;margin:0px}
    ul.cloud{zoom:1;overflow:hidden;width:300px}
    ul.cloud li{-moz-border-radius:6px;-webkit-border-radius:6px;background:#fff;border:solid 1px  purple;color:purple;padding:5px;margin-bottom:15px;border-radius:6px;-khtml-border-radius:6px;float:left;margin:0 5px 5px 0;line-height:30px;font-size:14px;cursor:pointer}
    ul.cloud li:hover,ul.cloud li.Selected{background:purple;color:#fff}
    ul.cloud li.green{color:green;border-color:green}
    ul.cloud li.green:hover,ul.cloud li.greenSelected{background:green;color:#fff}
    ul.cloud li.blue{color:blue;border-color:blue}
    ul.cloud li.blue:hover,ul.cloud li.blueSelected{background:blue;color:#fff}
    /*更加多颜色和样式类,注意样式名称规律*/
</style>
<ul class="cloud" id="ul">
    <li>标签1</li>
    <li class="green">标签2</li>
    <li class="blue">标签3</li>
    <li>标签4</li>
    <li>标签5</li>
    <li class="green">标签6</li>
</ul>
<input type="button" value="获取选择标签内容" onclick="getTags()"/>
<script>
    $('#ul li')
        .attr('cls', function () { return this.className })
        .click(function () {
            var cls = this.getAttribute('cls'), isSelected = this.className.indexOf('Selected') != -1;
            this.className = isSelected ? cls : cls + ' ' + cls+'Selected';
        });
    function getTags() {
        var tags = $('#ul li[class*="Selected"]').map(function () { return this.innerHTML }).get().join(',');
        alert(tags)
    }
</script>

the_dead
the_dead 大神求QQ
2 年多之前 回复
the_dead
the_dead 谢谢大神
2 年多之前 回复
beacon_2011
beacon_2011   Rxr 2015.07.28 09:10

动态修改吗?还是什么,需求不明确啊

the_dead
the_dead 回复qq_29993157: 已上传大图
2 年多之前 回复
qq_29993157
qq_29993157 就不能换个大点的图么
2 年多之前 回复
the_dead
the_dead 就是想把复选框做成这个样式的并不是进行动态的修改,知识复选框显示的样式改变
2 年多之前 回复
CSDNXIAOD
CSDNXIAOD   2015.07.28 09:02

css修改样式
Jquery修改CSS样式
利用CSS样式打印
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

the_dead
the_dead   2015.07.28 09:32

图片说明

the_dead
the_dead   2015.07.28 09:31

图片说明

Csdn user default icon
上传中...
上传图片
插入图片