я тут недавно задался мыслью найти рабочий код для изменения внешнего вида переключателя-кнопки iput с type="radio"
Код: Выделить всё
<input type="radio" class="radio" name="xxx" value="1" /> выбратьвыбрать
несколько раз находил интересные коды, но, при проверке на браузере, почему-то выводилось оба кода. и новый вид и старый. потом нашёл код, который при проверке показал положительный результат. к сожалению пока искал потерял ссылку на первоисточник...
выложу здесь (как чисто конструктор), чтобы и самому не забыть. здесь я переделал кнопки в личном разделе:
Вложение:
Комментарий к файлу: новый вид input radio
radio.png [ 32.77 КБ | Просмотров: 672 ] radio.png
radio.png [ 32.77 КБ | Просмотров: 672 ] radio.png
вот пример переделки:
было
Код: Выделить всё
<tr>
<td class="row1" width="50%"><b class="genmed">{L_VIEW_AVATARS}:</b></td>
<td class="row2"><input type="radio" class="radio" name="avatars" value="1"<!-- IF S_AVATARS --> checked="checked"<!-- ENDIF --> /><span class="gen">{L_YES}</span> <input type="radio" class="radio" name="avatars" value="0"<!-- IF not S_AVATARS --> checked="checked"<!-- ENDIF --> /><span class="gen">{L_NO}</span></td>
</tr>стало
Код: Выделить всё
<tr>
<td class="row1" width="50%"><b class="genmed">{L_VIEW_AVATARS}:</b></td>
<td class="row2">
<div class="radio_buttons">
<div>
<input type="radio" class="radio" id="avatars1" name="avatars" value="1"<!-- IF S_AVATARS --> checked="checked"<!-- ENDIF --> /><label for="avatars1">{L_YES}</label>
</div>
<div>
<input type="radio" class="radio" id="avatars2" name="avatars" value="0"<!-- IF not S_AVATARS --> checked="checked"<!-- ENDIF --> /><label for="avatars2">{L_NO}</label>
</div>
</div>
</td>
</tr>как видите, в новый код добавляется контейнер <div>, id="" и <label> и убирается старое название со <span>
код обработки css:
Код: Выделить всё
.radio_buttons {
margin: 0px;
font: 11px Tahoma;
}
.radio_buttons div {
float: left;
}
.radio_buttons input {
position: absolute;
left: -9999px;
}
.radio_buttons label {
display: block;
margin: 0 0 2px -1px;
padding: 4px 6px;
border: 1px solid #BBBBBB;
color:#ffffff;
_background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
background:#c1c1c1;
box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
cursor: pointer;
}
.radio_buttons input:checked + label {
color:#000000;
font-weight: bold;
background: white;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .2);
}
.radio_buttons div:first-child label {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.radio_buttons div:last-child label {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}может кому и пригодится в качестве добавочной информации...
