Question

.form-group {
    height: 16px;
}

.form-group > input {
    opacity: 0;
    position: absolute;
}

.form-group > input + label {
    background-image: url('Empty_Star.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 0 0 0 0;
    display:block;
    height: 16px;
    vertical-align: middle;
    line-height:16px;
}
.form-group > input[type=radio]:checked + label {
    background-position: 0 0;
}

<form name="rating" class="form-group">
        <input id="radio1" type="radio" name="rate" value="1"/>
        <label for="radio1"></label>
        <input id="radio2" type="radio" name="rate" value="2"/>
        <label for="radio2"></label>
        <input id="radio3" type="radio" name="rate" value="3"/>
        <label for="radio3"></label>
        <input id="radio4" type="radio" name="rate" value="4"/>
        <label for="radio4"></label>
        <input id="radio5" type="radio" name="rate" value="5"/>
        <label for="radio5"></label>
</form>

我不需要那里的标签，但每个关于如何更换单选按钮的教程都包括在内并且不包括它们并不起作用。因此，对此的任何帮助也是值得赞赏的。但我的主要问题是将五颗星（图像）中的每一颗相互并排。无论我做什么，它都无法奏效。我尝试过使用显示选项和阅读其他教程。没有什么工作正常。谢谢！

Answer 1

＆＃13;

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.form-group {
   /* height: 16px;*/
}
.form-group ul{}
.form-group ul li{    
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}

.form-group  input[type="radio"] {
    display: none;
}

.form-group  input[type="radio"] + label {
    background-image: url('http://www.iconsearch.ru/uploads/icons/uidesignicons/16x16/star_full.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 0 0 0 0;
    display:block;
    height: 16px;
    vertical-align: middle;
    line-height:16px;
}
.form-group input[type=radio]:checked + label {
    /*background-position: 0 0;*/
    background: url(http://www.iconsearch.ru/ajax/download.php?icon_id=14617&size=1&format=ico);
}
label{
    display: block;
    width: 16px;
    height: 16px;
}

＆＃13;

<form name="rating" class="form-group">
        <ul>
       <li><input id="radio1" type="radio" name="rate1" value="1"/>
        <label for="radio1"></label>
        <li><input id="radio2" type="radio" name="rate2" value="2"/>
        <label for="radio2"></label>
        <li><input id="radio3" type="radio" name="rate3" value="3"/>
        <label for="radio3"></label>
        <li><input id="radio4" type="radio" name="rate4" value="4"/>
        <label for="radio4"></label>
        <li><input id="radio5" type="radio" name="rate5" value="5"/>
        <label for="radio5"></label>
    </ul>
</form>

＆＃13;

将单选按钮替换为同一行中的图像

1 个答案: