the_dead 2015-07-28 00:51 采纳率: 100%
浏览 2347
已采纳

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

图片说明

  • 写回答

4条回答

  • Go 旅城通票 2015-07-28 02: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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型