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

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

一种解决方案是在隐藏单选框本身并将标签绑定(bind)到它们的单选框之后设置标签的样式。

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/