info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ 1 сообщение ] 

Автор Сообщение
Не в сети
(Андрей)  
Администратор
Аватара пользователя

Стаж: 6 лет 10 месяцев 27 дней
Сообщения: 1191
Откуда: здешние мы


Стиль: subsilver2


Репутация: 9


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Изменение внешнего выбора переключателя с тэгом radio


я тут недавно задался мыслью найти рабочий код для изменения внешнего вида переключателя-кнопки iput с type="radio"

Код: Выделить всё

<input type="radio" class="radio" name="xxx" value="1" /> выбрать


выбрать

несколько раз находил интересные коды, но, при проверке на браузере, почему-то выводилось оба кода. и новый вид и старый. потом нашёл код, который при проверке показал положительный результат. к сожалению пока искал потерял ссылку на первоисточник...

выложу здесь (как чисто конструктор), чтобы и самому не забыть. здесь я переделал кнопки в личном разделе:

Вложение:
Комментарий к файлу: новый вид input radio
radio.png
radio.png [ 32.77 КБ | Просмотров: 231 ] 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>&nbsp; &nbsp;<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;
}



может кому и пригодится в качестве добавочной информации...


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
radio,input
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ 1 сообщение ] 

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (45) здесь было 28 авг 2021, 12:44

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы можете защищать свои темы паролем

Найти:
Перейти:  

cron

Текущее время: 19 авг 2022, 04:55

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид