CODEWITHSUNDEEP
htmlcssinputradio-buttonlabel
Patrick R
Patrick R

Reputation: 1979

Separate Label and Input

I have a label that contains a Input Radio with a background image. As you can see here enter image description here

I need the "Ja" and "Nej" to be like 5-10pix to the left, but I just can't seem to find a solution. Can someone help me here ?

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;
}

Upvotes: 0

Views: 1116

Answers (1)

David Thomas
David Thomas

Reputation: 253486

I'd suggest:

#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.

The above specifies the background-image property, rather than the shorthand, because with the shorthand the id-based selectors overrides the later declarations for background-repeat and background-position (since the shorthand defines all properties, -color, -repeat and -position).

Also, specify all shared properties in one place, which makes it easier to keep properties consistent and more easily maintainable.

Upvotes: 1

Related Questions