Замена радиокнопок на модные переключатели на чистом CSS
Поделюсь одним из вариантов создания радиокнопок на css в стиле iOs
Замена радиокнопок на модные переключатели на чистом CSS

Замена радиокнопок на модные переключатели на чистом CSS

Привет всем! Сегодня я хотел бы поделится с вами результатами моих работ в сфере css модернизации.
Делая одну из тем для сайта на cotonti, мне пришла мысль заменить радиокнопки на более модные. Знаю что есть куча всяких вариантов используя  javascript или плагинов для jquery. Но мне хотелось не нагружать страницу лишним кодом.


Давайте начнем с примера: Вот что у нас получится

В поисках решений я наткнулся на статью по способу реализации данной фишки, но в том варианте было много лишнего и сырого.И мало подходило для нашего любимого движка Cotonti. К тому же в том варианте не правильно отображался выбранный элемент по Checked.

В общем некий результат получен. Данный вариант проверялся на последних версиях браузеров Safari, Opera, Chrome, Firefox. Это первая, возможно еще сырая версия. Я буду очень рад если вы поможете довести данный вариант до идеала))))

Так как это делалось под котонти, то опишу что над делать именно для этого движка. Для остальных по аналогии но с учетом их требований.

Для начала вам необходимо найти переменную $R['input_radio'] в файле system/resources.php и поменять её значение с

$R['input_radio'] = '<label><input type="radio" name="{$name}" value="{$value}"{$checked}{$attrs} /> {$title}</label>';

на

$R['input_radio'] = '<label><input type="radio" name="{$name}" value="{$value}" {$checked} {$attrs} /><span><label>{$title}</label></span></label>';

Таким образом конструкция радиокнопок, созданных Cotonti получится вида:

<span class="switchradio">
    <label><input type="radio" name="examplename" value="1" checked="checked"><span><label>Да</label></span></label>
    <label><input type="radio" name="examplename" value="0"><span><label>Нет</label></span></label>
</span>

Далее нам необходимо обернуть все теги в вашем шаблоне сайта в span с классом "switchradio". Пример для страницы профиля пользователя  в файле  users.profile.tpl  можно поменять вид радиокнопок для пункта Скрывать e-mail.  Необходимо обернуть тег  {USERS_PROFILE_HIDEEMAIL} в span:

<span class="switchradio">{USERS_PROFILE_HIDEEMAIL}</span>

Если хотите квадратный переключатель, то добавляете класс swbox для span.

<span class="switchradio swbox">{USERS_PROFILE_HIDEEMAIL}</span>

Ну и собственно добавить в свой css файл:

/*SWITCH RADIO */
.switchradio,
.switchradio input,
.switchradio label input + span,
.switchradio label input + span label,
.switchradio label input:checked + span label,
.switchradio label input[value="1"]:checked + span,
.switchradio label input[value="0"]:checked + span{
    position: absolute;
    vertical-align: middle;
    width:60px;
    height:20px;
    cursor: pointer;
    font-size: 14px;
}
.switchradio label input + span label{
    overflow: hidden;
    line-height:20px;
    text-align: center;
}
.switchradio,
.switchradio input,
.switchradio label input + span{
    position: absolute;
    box-shadow:
        0 0 0 2px rgba(40, 40, 40, 0.04) inset,
        0 0 4px rgba(40, 40,40, 0.3) inset,
        0 5px 4px 1px rgba(40, 40, 40, 0.25) inset,
        0 27px 0 rgba(40, 40, 40, 0.07) inset;
}

.switchradio label input + span{
    top:0px;
}
.switchradio{
    position:relative;
    display:inline-block;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.switchradio input{
    top:-4px; left:0;
    opacity: 0;
    z-index:1;
}
.switchradio input:checked{
    z-index:0;
}
.switchradio label input[value="1"] + span label{
    text-indent: -10px; 
    color:#eee;
    text-shadow: 0 -1px 0 #355;
}
.switchradio label input[value="0"] + span label{
    text-indent: 15px; 
    color:#555;
    text-shadow: 0 1px 0 #ffffff;
}
.switchradio label input[value="1"] + span{
    background: #369AEE;  
}
.switchradio label input[value="0"] + span{
     background: #f5f5f5;  
}
.switchradio label input[value="0"]:checked + span{
    left:0px;
}
.switchradio label input[value="1"]:checked + span{
    right:0px;
}
.switchradio label input + span label{
    width:0px; 
}
.switchradio label input + span{
    width:18px;
}
.switchradio label input[value="0"] + span{
    left:42px;  
}
.switchradio label input[value="1"] + span{
    right:42px;  
}
.switchradio label input + span label,
.switchradio label input:checked + span label,
.switchradio label  input + span,
.switchradio label  input:checked  + span{    
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.switchradio label   input[ value="0"] + span:after {
    position:absolute; 
    top:0px;
    left:0px;
    width:20px;
    height:20px;
    background:#E5E5E5;
    background:-webkit-linear-gradient(#D0D0D0, #FDFDFD);
    background:-moz-linear-gradient(#D0D0D0, #FDFDFD);
    background:-o-linear-gradient(#D0D0D0, #FDFDFD);
    background:linear-gradient(#D0D0D0, #FDFDFD);
    box-shadow:
    0 0 2px 2px #FFF inset,
    0 0 4px 1px rgba(0, 0, 0, 0.4);
    content:'';
}
.switchradio,
.switchradio input,
.switchradio label input + span,
.switchradio label   input[ value="0"] + span:after{
    border-radius:30px; 
}

.switchradio.swbox,
.switchradio.swbox input,
.switchradio.swbox label input + span,
.switchradio.swbox label   input[ value="0"] + span:after{
    border-radius:4px; 
}

Хотелось бы заметить что данный вариант, работает только с радиокнопками со значениями value = 1 или 0, для остальных значений нужно править css правила.
Пока все!

CSS комментариев

Поделитесь с друзьями: