CODEWITHSUNDEEP
htmlcssformstwitter-bootstrapradio-button
user3691280
user3691280

Reputation: 259

radio buttons - weird behaviour, how to style them?

I'm using Twitter Bootstrap and I need two radio buttons, inline, with text on the left. So far afer a couple of pieces of different code I managed to get them inline, the text is on the right though. That's not the main problem anyway - take a look at how the radio buttons look:

http://postimg.org/image/q0bngh1a7/

On the left there seem to be two radio buttons, one on top of the other. Another thing is that when I choose the second one, the first one still appears chosen.

My questions (the most important on top): 1) How to deal with two radio buttons being chosen at the same time? 2) How to style the radio buttons? I tried background color, border - nothing changes 3) How to put the text to the left from the radio button? Changing its position before and after input doesn't change a thing.

Here's the code:

<form name="searchform">
<input type="text" name="searchterms">
<input type="submit" name="SearchSubmit" value="Search">

<label class="search-radio-text"><input type="radio" name="sex"  value="male">Nazwisko</label>
<label class="search-radio-text"><input type="radio" name="sex" value="female">Tytuł</label>
</form>

Upvotes: 1

Views: 590

Answers (1)

user2314737
user2314737

Reputation: 29307

One solution is to style the labels, after hiding the radio boxes themselves and binding the labels to their radio boxes.

HTML

<form name="searchform">
    <input type="text" name="searchterms">
    <input type="submit" name="SearchSubmit" value="Search">
    <input type="radio" id="radio1" name="sex" value="male">
    <label class="search-radio-text" for="radio1">Nazwisko</label>
    <input type="radio" id="radio2" name="sex" value="female">
    <label class="search-radio-text" for="radio2">Tytuł</label>
</form>

CSS

input[type="radio"] {
    display:none;
}
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
input[type=radio]:checked + label {
    background-image: none;
    background-color:#99cc33;
}

Demo: http://jsfiddle.net/user2314737/X5gBm/

You can also simulate checkboxes using images like this: http://jsfiddle.net/user2314737/X5gBm/1/

Upvotes: 1

Related Questions