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

【问题标题】：radio buttons - weird behaviour, how to style them?单选按钮 - 奇怪的行为，如何设置它们的样式？
【发布时间】：2014-08-20 14:34:07
【问题描述】：

我正在使用 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>

【问题讨论】：

请发给你图片我无法访问你提供的链接
你试过什么CSS？

标签： html css forms twitter-bootstrap radio-button

【解决方案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/

【讨论】：