单选按钮 - 奇怪的行为，如何设置它们的样式？

Question

我正在使用Twitter Bootstrap，我需要两个内联单选按钮，左侧是文本。到目前为止，我已经设法让它们内联了几行不同的代码，但文本在右边。无论如何，这不是主要问题 - 看一下单选按钮的外观：

左边似乎有两个单选按钮，一个在另一个上面。另一件事是，当我选择第二个时，第一个仍然会被选中。

我的问题（最重要的是）： 1）如何处理同时选择的两个单选按钮？ 2）如何设置单选按钮的样式？我试过背景颜色，边框 - 没什么变化 3）如何通过单选按钮将文本放在左侧？在输入之前和之后改变它的位置不会改变事物。

以下是代码：

<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

一种解决方案是在隐藏无线电盒本身并将标签绑定到其无线电盒后，对标签进行样式设置。

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

演示：http://jsfiddle.net/user2314737/X5gBm/

您还可以使用以下图片模拟复选框：http://jsfiddle.net/user2314737/X5gBm/1/