переключатели - странное поведение, как их оформить?

#html #css #forms #twitter-bootstrap #radio-button

#HTML #css #формы #twitter-bootstrap #переключатель

Вопрос:

Я использую 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>

Ответ №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 /