Question

我正在开发一个Web项目的前端。为了适应网站的设计，我希望我的单选按钮看起来像这样：

nice radio buttons

所以我前往this nice article并开始阅读，以便我自己实现。我已经在illustrator中创建了上面的三个图标并将它们保存到我的web项目中。

HTML CODE：

<section>
    <div class="radio">
        <input type="radio" class="radio-btn" name="person" id="radio-btn-james" value="James" checked>
        <label for="radio-btn-james">James</label>
    </div><!-- .radio -->

    <div class="radio">
        <input type="radio" class="radio-btn" name="person" id="radio-btn-michael" value="Michael">
        <label for="radio-btn-michael">Michael</label>
    </div><!-- .radio -->

    <div class="radio">
        <input type="radio" class="radio-btn" name="person" id="radio-btn-andy" value="Andy">
        <label for="radio-btn-andy">Andy</label>
    </div><!-- .radio -->
</section>

CSS代码：

section {
    padding: 50px;
}

/* RADIO BUTTON STYLING */

.radio-btn {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.radio-btn {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    clip: rect(0 0 0 0);
}

.radio-btn,
.radio-btn + label::before {
    content: url('radio_unchecked.png');
}

.radio-btn:checked + label::before {
    content: url('radio_checked.png');
}

.radio-btn:hover,
.radio-btn:hover + label::before {
    content: url('radio_hover.png');
}

.radio label {
    padding-left: 20px;
}

但我的行为很奇怪！我创建了JSFiddle我拥有的东西。

问题：

单选按钮不会勾选（图标不会改变）。
当我悬停时，图标会更改错误的单选按钮，而不是我翻过来的那个！

Answer 1

这将解决它：http://jsfiddle.net/hf8Ux/

HTML CODE：

<section>
        <div class="radio">
            <input type="radio" name="person" id="radio-1" value="James">
            <label for="radio-1">James</label>
        </div>

        <div class="radio">
            <input type="radio" name="person" id="radio-2" value="Michael">
            <label for="radio-2">Michael</label>
        </div>

        <div class="radio">
            <input type="radio" name="person" id="radio-3" value="Andy">
            <label for="radio-3">Andy</label>
        </div>
    </section>

CSS代码：

.radio input[type=radio] {
   visibility: hidden;
}   
.radio input + label::before {
    content: url('http://i61.tinypic.com/k9umie.png');
    margin-right:5px;
}

.radio input:checked + label::before {
    content: url('http://i62.tinypic.com/5mjspc.png');
}
.radio input:hover + label::before {
    content: url('http://i62.tinypic.com/kasc5k.png');
}

Answer 2

任何元素的id在HTML中都应该是唯一的，而label元素的for属性应该指向id。（这解决了问题2。）

因此HTML应如下所示：

  <section>
    <div class="radio">
            <input type="radio" name="person" id="person_1" value="James" checked>
            <label for="person_1">James</label>
        </div><!-- .radio -->

        <div class="radio">
            <input type="radio" name="person" id="person_2" value="Michael">
            <label for="person_2">Michael</label>
        </div><!-- .radio -->

        <div class="radio">
            <input type="radio" name="person" id="person_3" value="Andy">
            <label for="person_3">Andy</label>
        </div><!-- .radio -->
    </section>

问题1有点复杂，但它与创建选择器的方式有关。

#radio-btn, #radio-btn + label表示将此css应用于具有#radio-btn id的任何元素，并且（以逗号分隔的第二个规则）将其应用于此元素后面的标签。所以这并没有达到你想要的效果。您只想定位直接在radiobutton之后的标签。您可以使用：input + label或更具体的input[type='radio'] + label

来执行此操作

使用CSS3 ::之前和::之后的样式单选按钮

2 个答案: