radio buttons - weird behaviour, how to style them? - html

Question

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:
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>

Answer 1

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/