html - 分离标签和输入

Question

我有一个label包含Input Radio背景图像的。正如你在这里看到的

我需要“Ja”和“Nej”像左边的 5-10pix，但我似乎无法找到解决方案。有人可以在这里帮助我吗？

HTML：

<label id="labelradio1" for="Radio1">Ja
<input id="Radio1" type="radio" value="yes"></label>
<label id="labelradio2" for="Radio2">Nej
<input id="Radio2" type="radio" value="no"></label>

CSS：

#txtradiocall input[type='radio']{
    position:absolute;
    margin: -99999px;
}


#txtradiocall label{
    display: inline-block;
    cursor: pointer;
    width: 15px;
    height: 15px;
    margin: 4px;

}

#txtradiocall #labelradio1 {
    background: url('http://www.xxxx.com/images/images/thumb_up_green-v2.png');
    background-repeat:no-repeat;
    cursor: pointer;
    width: 35px;
    height: 22px;
}

#txtradiocall #labelradio2 {
    background: url('http://www.xxxx.com/images/images/thumb_down-red-v2.png');
    background-repeat:no-repeat;
    cursor: pointer;
    width: 35px;
    height: 22px;
}

Answer 1

我建议：

#txtradiocall #labelradio1 {
    background-image: url('http://placekitten.com/35/22');
}
#txtradiocall #labelradio2 {
    background-image: url('http://placekitten.com/35/22');
}

#txtradiocall label {
    padding: 0 40px 0 0;
    cursor: pointer;
    width: 35px;
    height: 22px;
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

JS 小提琴演示。

上面指定了background-image属性，而不是简写，因为使用简写，id基于 - 的选择器会覆盖后面对background-repeatand的声明background-position（因为简写定义了所有属性-color，-repeat和-position）。

此外，在一处指定所有共享属性，这样更容易保持属性一致且更易于维护。