单独的标签和输入

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的后续声明（因为简写定义了所有属性，-color，-repeat和-position）。

此外，在一个位置指定所有共享属性，这样可以更容易地保持属性的一致性并且更易于维护。