分离标签和输入

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 Fiddle demo.

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

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