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
接近 3 年之前 回复
the_dead
the_dead 谢谢大神
接近 3 年之前 回复
beacon_2011
beacon_2011   Rxr 2015.07.28 09:10

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

the_dead
the_dead 回复qq_29993157: 已上传大图
接近 3 年之前 回复
qq_29993157
qq_29993157 就不能换个大点的图么
接近 3 年之前 回复
the_dead
the_dead 就是想把复选框做成这个样式的并不是进行动态的修改,知识复选框显示的样式改变
接近 3 年之前 回复
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
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
更改checkbox默认样式、radio默认样式,CSS实现自定义
原理是被label标签包裹的input与该label是绑定的,点击该label内的元素也触发check,于是可以将标签内的input隐藏,换上自定义图片或者自定义css样式。附带使用伪元素和自定义图片的例子。
(转) 纯CSS设置Checkbox复选框控件的样式
(转) http://www.xiumu.org/technology/style-checkboxes-with-css.shtml Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的。为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框。 在本教程中
使用css修改input框中checkbox的样式
概述    在页面设计时,我们经常使用input复选框。由于界面设计的需要,我们需要修改复选框的样式,使得界面更美观或者适应新的需求。由于CheckBox伪类修改比较复杂,通常修改的方式有两种,一个是链入图片,另一个是使用纯css的方法进行修改。链入图片的设计方式比较简单,但是需要预先设计或者下载图片,比较麻烦。纯css的方法,只需要在css文件中编写代码,个人觉得比较方便,因此,本文使用该方式对...
HTML复选框checkbox默认样式修改
此方法可以将复选框的默认样式替换成任意样式。如图: 未选择:选择时:思路:将复选框隐藏,利用lebal元素的焦点传递特性,用lebal的样式替代复选框。代码如下:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>checkbox css change</title> <style type="text/css"> input[t
Css改变checkbox的样式
一个复选框: 带文字的: 复选框的颜色,和对勾的颜色都是可以更改的。 html代码结构: css代码: /*#region checkbox样式 */ span { position: relative; display: block; /*margin: 20px 100px;*/ } spa
纯CSS改写checkbox样式,让复选框看起来更舒服一些
系统自带的checkbox样式,呵呵 特别是在手机上,得拿放大镜看,改它! 纯CSS的,利用了label,看代码: .mycheck { width: 25px; margin: 20px 100px; position: relative; } .mycheck input[type=checkbox] { visibility: hidden; } .mycheck
如何改变默认的checkbox样式
我们在项目中使用到input标签的checkbox的时候,它的默认样式通常无法满足项目需求,主要是它显得有点小而丑。将它根据项目的需求进行改造就是我们要做的事情了,下面讲两种常用的做法。 1.使用背景图片代替选中效果 主要原理就是将原来的checkbox隐藏:visibility: hidden属性但它依然占据位置,用图片代替它的位置。 优点就是兼容性好 效果图: 代码: --...
用iconfont修改checkbox样式
<lable class="checkbox"> <input type="checkbox"> <i class="iconfont icon-check"></i> </lable> <style> input{ width: 16px; height: 16px; opacity: 0; position
CSS3设置checkbox的样式
一般在网上都能看到各式各样的二选一“按钮”组件,轻松惬意的滑动,朴实快速的效果往往给人以美感,那么这些是怎么实现的呢? 那么lz接下来就一步步讲述自学过程; No.1 先实现再理解 我的习惯是,拿到一个需求,首先理解它,是否能拿到成品,然后再一步步往下理解它,最后完全理解(方法因人而异) checkbox样式参考网站 http://uploads.xiumu.org/2014/0
自定义input checkBox的样式
参考地址 http://www.cnblogs.com/CheeseZH/p/4580062.html 在做电商网站的时候,在产品页会有搭配选择的面板,这个时候设计就出了什么鬼的checkbox,好吧,他们从来都是怎么好看怎么来。 自己试了一下不行,checkbox不是他们要的哪一款。 然后找到了博主写的。 我是按照他的第五款来的,然后他用css3实现的对勾我就直接换成一张图片了,有