自定义input[type="radio"]的样式

对于表单，input[type="radio"] 的样式总是不那么友好，在不同的浏览器中表现不一。

为了最大程度的显示出它们的差别，并且为了好看，首先定义了一些样式：

<span style="color: #000000;">html:
</span><span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sex"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>女<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>男<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span>

<span style="color: #800000;">css:
body </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">
input </span>{<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">
.female, .male </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 40px</span>;
}<span style="color: #800000;">
.sex label </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}<span style="color: #800000;">
.sex input </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}

然后在各个浏览器中观察，会发现有很大的差别：

ie:

---

 

edge:

---

 

opera:

---

 

chrome:

---

 

firefox:

---

 

对于 firefox 浏览器，即便是设置了宽和高，依然是没有效果，input[type="radio"] 的那个圆圈还是初始状态那么大。其它浏览器的表现也不一致，为了达到一致的效果，我们需要做兼容处理。

思路：

1. 将 input[type="radio"] 隐藏， opacity: 0; 置于上层，当我们点击它时，就能正确的响应原本的事件。

2. 自定义一个圆圈，置于下层，模拟原本相似的样式；

3. 用 js 实现选中 input[type="radio"] 时，在其下层的自定义的元素改变原来的背景颜色。

代码：

<span style="color: #000000;">html:
</span><span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sex"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>女<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="female-custom"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">> <!-- 同下面的 span 一样作为自定义的元素 --></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>男<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="male-custom"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>    
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span>

<span style="color: #800000;">css:
body </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">
input </span>{<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">
.female, .male </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>; /* 设置为相对定位，以便让子元素能绝对定位 */<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 40px</span>;
}<span style="color: #800000;">
.sex label </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}<span style="color: #800000;">
.sex input </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>; /* 这里及以上的定位，可以让该元素竖直居中。(top: 0; bottom: 0;) */<span style="color: #ff0000;">
    opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}<span style="color: #800000;">
.sex span </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 25px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 25px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #000</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> pointer</span>;
}<span style="color: #800000;">        
.sex span.active </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #000</span>;            
}

<span style="color: #000000;">js:
$(</span>"#male").click( <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
    $(</span><span style="color: #0000ff;">this</span>).siblings("span").addClass("active"<span style="color: #000000;">);
    $(</span><span style="color: #0000ff;">this</span>).parents("div").siblings("div").children("span").removeClass("active"<span style="color: #000000;">);
});
$(</span>"#female").click( <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
    $(</span><span style="color: #0000ff;">this</span>).siblings("span").addClass("active"<span style="color: #000000;">);
    $(</span><span style="color: #0000ff;">this</span>).parents("div").siblings("div").children("span").removeClass("active"<span style="color: #000000;">);
});</span>

这样处理后，在浏览器中展示效果全部一样了：

---

扩展：

1. 对于代码中出现的定位，对父元素使用 position: relative; 给子元素使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 能实现让子元素相对于父元素居中(满足水平居中和竖直居中)显示。如果只是需要竖直居中，则不需要添加 right: 0; 和 left: 0; 的样式。

2. 有时当我们不容易确定子元素的高度时，可以这样设置：对父元素 position: relative; 对子元素 position: absolute; top: 10px; bottom: 10px; margin: auto; 这样一来，子元素的高度就是父元素的高度减去20px后的值了，同样，top 和 bottom 支持百分数，可扩展性更强。

 

优化更新：

需求：

1. 有时候我们需要内联的单选样式；

2. 选中的按钮内的小圆圈不需要占满整个外圈的大小。

思路：

1. 让每一个包裹选择的 div 左浮动；

2. 给父元素添加圆形的外边框，子元素设置一个稍小于父元素大小的背景。

代码：

<span style="color: #000000;">html:
</span><span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="fruit"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="apple"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="apple"</span><span style="color: #0000ff;">></span>苹果<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="fruit"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="apple"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="user-defined"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="circle"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="banana"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="banana"</span><span style="color: #0000ff;">></span>香蕉<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="fruit"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="banana"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="user-defined"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="circle"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="orange"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="orange"</span><span style="color: #0000ff;">></span>橘子<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="fruit"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="orange"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="user-defined"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="circle"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

<span style="color: #800000;">css:
* </span>{<span style="color: #ff0000;"> box-sizing</span>:<span style="color: #0000ff;"> border-box</span>; }<span style="color: #800000;">

body </span>{<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 50px</span>; }<span style="color: #800000;">

input </span>{<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">

.fruit:before </span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;"> ""</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> table</span>; }<span style="color: #800000;">

.fruit:after </span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;"> ""</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; }<span style="color: #800000;">

.fruit > div </span>{<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;"> margin-right</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 40px</span>; }<span style="color: #800000;">

.fruit > div:last-child </span>{<span style="color: #ff0000;"> margin-right</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;">

.fruit label </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;"> cursor</span>:<span style="color: #0000ff;"> pointer</span>; }<span style="color: #800000;">

.fruit input </span>{<span style="color: #ff0000;"> z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;"> top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;"> cursor</span>:<span style="color: #0000ff;"> pointer</span>; }<span style="color: #800000;">

.fruit .user-defined </span>{<span style="color: #ff0000;"> z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;"> top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid #000</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;"> cursor</span>:<span style="color: #0000ff;"> pointer</span>; }<span style="color: #800000;">

.fruit .user-defined span.circle  </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;"> margin-top</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;"> margin-left</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 50%</span>; }<span style="color: #800000;">

.fruit .user-defined span.active  </span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #000</span>; }

<span style="color: #000000;">js:
$(</span>"input").click(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
    $(</span><span style="color: #0000ff;">this</span>).siblings("div").children("span").addClass("active"<span style="color: #000000;">);
    $(</span><span style="color: #0000ff;">this</span>).parents("div").siblings("div").find("span").removeClass("active"<span style="color: #000000;">);
});</span>

效果显示如下：