» »

Изменение радио кнопок с помощью CSS. Стилизация чекбоксов и радиокнопок на чистом CSS с совместимостью для старых браузеров Input type radio css примеры

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

Как и в случаи с чекбоксами, весь фокус делается с помощью тех же псевдоселекторов:checked и:not. Аналогично обычная радио кнопка скрывается, а новая на ее месте отображается, которая и имеет более презентабельный вид.

Обычно, radio кнопки идут по несколько штук сразу. С помощью них вы делаете выбор внутри формы перед отправкой. В примерах я тоже буду размещать по две кнопки. Если вам нужно больше или меньше, то без проблем добавляйте или удаляйте соблюдая некоторые правила о которых я напишу ниже.

К примеру, у нас будет две обычные кнопки, которые будут иметь вот такой код.



К каждой кнопке мы с вами добавили метку с помощью label . Если в старых можно обойтись без них, то в новых они понадобятся в любом случаи. Без них нельзя. В отличии от обычных radio кнопок, у новых так же должен быть указан класс. В итоге получится так:



Как видите, добавлен класс myradio . Именно этому классу и будут присвоены новые стили CSS. Так же не забудьте про другие стандартные параметры радиокнопок, которые нужно добавлять всем кнопкам.

  • id - кнопкам добавляются айди, для того, чтобы было можно подвязать к ним метки label.
  • name - имя кнопки. Его можно указывать одинаковым для нескольких радио кнопок, тогда будет возможность переключения между кнопками в форме. Если имена будут разными, то после активации такой кнопки, снять выделение с нее не получится.
  • for у метки label - должен соответствовать id нужной кнопки. Важным является момент, что label должен располагаться сразу после радио кнопки.

Закончив с HTML разметкой кнопок, вы можете приступить к их внешним изменениям. Как и писал ранее, все стили мы добавим нашему классу - myradio . Для этого в свой файл стилей, вы должны добавить вот такой кусок кода.

Myradio { vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; } .myradio + label { cursor: pointer; } .myradio:not(checked) { position: absolute; opacity: 0; } .myradio:not(checked) + label { position: relative; padding: 0 0 0 35px; } .myradio:not(checked) + label:before { content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #ccc; border-radius: 50%; background: #FFF; } .myradio:not(checked) + label:after { content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #2ebbde; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: all .2s; } .myradio:checked + label:after { opacity: 1; } .myradio:focus + label:before { box-shadow: 0 0 3px 3px rgba(45,182,216,.3); }

Если вы давно работаете с CSS, то на этом все и больше никаких шагов не будет. Можете смотреть результат и править стили под себя. Если же вам код не понятен, но вы хотите как то его разобрать, то попробую объяснить, что за что отвечает. Каждый параметр не буду расписывать, для этого существуют учебники по CSS, лишь объясню основы.

    Немного ровняем кнопку для старых версий Internet Explorer.

    Делаем наш label кликабельным. При наведении на него будет появляться рука вместо стрелки.

    Myradio + label { cursor: pointer; }

    С этого места начинается модернизация кнопок. Первым делом, делаем нашу стандартную кнопку невидимой.

    Myradio:not(checked) { position: absolute; opacity: 0; }

    Задаем позиционирование новой кнопке относительно нашего label

    Myradio:not(checked) + label { position: relative; padding: 0 0 0 35px; }

    Настройка вида для неактивной кнопки, когда в центре нет точки.

    Myradio:not(checked) + label:before { content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #ccc; border-radius: 50%; background: #FFF; }

    Это внешний вид той точки/кружка, что появляется в центре при нажатии на кнопку.

    Myradio:not(checked) + label:after { content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #2ebbde; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: all .2s; }

    Прозрачность кружка/точки при активации. Как видно в предыдущем пункте был параметр - opacity: 0;

    Myradio:checked + label:after { opacity: 1; }

    Этот параметр я выделил как опциональный. Его эффект - тень вокруг кнопки при фокусировке во время нажатия на нее. В примере это самые нижние кнопки. Если вам не нравится, можете его не добавлять.

    Myradio:focus + label:before { box-shadow: 0 0 3px 3px rgba(45,182,216,.3); }

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

На этом все, спасибо за внимание. 🙂

Часто бывает нужно сделать так, что бы какие-то html элементы имели нестандартный вид.

Раньше для этого мастерили много JavaScript кода, который делал нужные подмены. Теперь же можно на чистом CSS это все организовать. Причем работоспособность гарантированна во всех современных браузерах.
Для чего это нам может понадобиться? Вариантов применения масса от красивого меню до выбора необходимых опций у товаров для подсчета цены. Например берем аренда авто Харьков и для каждой машины делаем возможность выбрать, необходимые в аренде авто, опции. И красиво и пользователю удобно как со стационарного компьютера так и с мобильного устройства.

Итак, нам необходимо сделать отображение стандартных input radio в виде стилизированных кнопок.

Создаем небольшой файл стилей:

Radio_buttons { margin: 20px; font: 14px Tahoma; } .radio_buttons div { float: left; } .radio_buttons input { position: absolute; left: -9999px; } .radio_buttons label { display: block; margin: 0 0 0 -1px; padding: 8px 10px; border: 1px solid #BBBBBB; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); box-shadow: 0 2px 5px rgba(0, 0, 0, .12); cursor: pointer; } .radio_buttons input:checked + label { 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; }

А теперь все стили применим на html разметку:

Таким простым способом мы добились нужного эффекта.

a! Часто ли Вы создаете различные формы, опросы на своих сайтах? Если да, то наверняка Вам хотелось изменить стандартные элементы. В этой статье покажу как можно легко и просто заменить стандартные элементы checkbox (флажки) и radio button (переключатели) на свои. Использовать будем средства только CSS3 !

То что получилось посмотрите и опробуйте на демо-странице или скачайте исходники:

HTML разметка

Расположим элементы на странице:

Здесь ничего особенного, каждому элементу задаем id и name , также используем label для описания элементов «переключателя» и «флажка». Внутрь тега label , вставляем span . Для чего именно, написано ниже.

Правила CSS

Сейчас начинается самое интересное. Разберем создание только элемента «флажок», «переключатель» формируется аналогичным путем. Первое что мы делаем, это скрываем стандартный флажок из виду:

input[ type= "checkbox" ] {
display : none ;
}

Теперь, становится ясно, для чего нужен элемент span . Вместо скрытого стандартного флажка организуем новый, используя span :

1
2
3
4
5
6
7
8
9

input[ type= "checkbox" ] + label span {
display : inline-block ;
width : 19px ;
height : 19px ;
margin : -1px 4px 0 0 ;
vertical-align : middle ;
background : url () left top no-repeat ;
cursor : pointer ;
}

С помощью CSS селектора выбираем все span внутри тега label , которые принадлежат элементам input с типом checkbox (т.е. выбираем все «флажки»). И используем вот такой спрайт (одно общее изображение, вместо множества):

Для выбранных span задаем высоту и ширину в 19px , и располагаем фоновое изображение.

Осталось только организовать правило для активного «флажка» (псевдо-селектор :checked ). Для этого просто смещаем данное изображение влево на 19px :

input[ type= "checkbox" ] : checked + label span {
background : url () -19px top no-repeat ;
}

Вот таким не хитрым способом, с применением нескольких тактик можно организовать на сайте, элементы на свой вкус. Для «переключателей» правила выстраиваются подобным образом, только соответственно фоновое изображение смещается еще на 19px и немного изменятся css селектор, вместо type=»checkbox» используется type=»radio» .

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина ), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не поддерживают современные CSS-правила.

Другими словами — в современных браузерах чекбоксы и радиокнопки будут выглядеть красиво, в соответствии с задуманным дизайном, а в старых (это относится к Internet Explorer версии 8 и ниже ) они останутся с оформлением «по умолчанию», характерным для каждой конкретной операционной системы.

Кроме того, сохраняется возможность HTML5-валидации стилизуемых элементов (чего может не быть при использовании JavaScript-плагинов). В современных браузерах ее поддержка — уже давно норма.

Важные особенности

Чтобы всё получилось, важно учитывать следующее:

  1. Кроме, собственно, самого тега элемента, который мы хотим красиво оформить ( или ), понадобится тег
  2. Тег должен находиться до тега

«Фокус» заключается в использовании псевдоселекторов:checked и:not . При этом сам чекбокс или радиокнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоэлементов:before и:after для тега

Стилизация для современных браузеров

Рассмотрим оба вариант расположения стилизуемого элемента формы. Какой из них наиболее удобен — решать вам. Суть от этого не меняется.

Теги чекбокса и радиокнопки находятся перед тегом

В HTML-коде это выглядит следующим образом:

Еще раз хочу заострить ваше внимание — тег обязательно должен быть расположен перед тегом

CSS-код для чекбокса будет таким:

Checkbox { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; } .checkbox + label { position: relative; padding: 0 0 0 60px; cursor: pointer; } .checkbox + label:before { content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; } .checkbox + label:after { content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; } .checkbox:checked + label:before { background: #9FD468; } .checkbox:checked + label:after { left: 26px; } .checkbox:focus + label:before { box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); }

CSS-код для радиокнопки будет таким:

Radio { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .radio + label { position: relative; padding: 0 0 0 35px; cursor: pointer; } .radio + label:before { content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; } .radio + label:after { content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; } .radio:checked + label:after { opacity: 1; } .radio:focus + label:before { box-shadow: 0 0 0 3px rgba(255,255,0,.7); }

С помощью свойств position , z-index и opacity для классов.checkbox и.radio мы визуально прячем оригинальные элементы, при этом они остаются на том же самом месте, где будут стилизованные элементы. А с помощью margin немного смещаем их, чтобы сообщение валидации HTML5 смотрелось гармонично. В зависимости от дизайна чекбокса и радиокнопки этот отступ можно подогнать.

Теги чекбокса и радиокнопки находятся внутри тега

HTML-код в данном случае будет следующим:

Я переключаю чекбокс

По аналогии с предыдущим вариантом — тег обязательно должен быть расположен перед тегами с классом.checkbox__text и.radio__text .

CSS-код для чекбокса будет таким:

Checkbox input { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; } .checkbox__text { position: relative; padding: 0 0 0 60px; cursor: pointer; } .checkbox__text:before { content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; } .checkbox__text:after { content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; } .checkbox input:checked + .checkbox__text:before { background: #9FD468; } .checkbox input:checked + .checkbox__text:after { left: 26px; } .checkbox input:focus + .checkbox__text:before { box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); }

CSS-код для радиокнопки будет таким:

Radio input { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .radio__text { position: relative; padding: 0 0 0 35px; cursor: pointer; } .radio__text:before { content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; } .radio__text:after { content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; } .radio input:checked + .radio__text:after { opacity: 1; } .radio input:focus + .radio__text:before { box-shadow: 0 0 0 3px rgba(255,255,0,.7); }

Стили здесь те же самые, что и в предыдущем способе, только они применяются для других селекторов.

Стилизация с учетом старых браузеров

CSS-код для чекбокса . В комментариях к коду я добавил пояснения касательно браузеров:

/* Cначала обозначаем стили для IE8 и более старых версий т.е. здесь мы немного облагораживаем стандартный чекбокс. */ .checkbox { vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; } /* Это для всех браузеров, кроме совсем старых, которые не поддерживают селекторы с плюсом. Показываем, что label кликабелен. */ .checkbox + label { cursor: pointer; } /* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше. Благодаря тому, что старые браузеры не поддерживают селекторы:not и:checked, в них все нижеследующие стили не сработают. В данном случае checked указывается без двоеточия впереди, почему-то это срабатывает именно так. */ .checkbox:not(checked) { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; } .checkbox:not(checked) + label { position: relative; padding: 0 0 0 60px; } .checkbox:not(checked) + label:before { content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; } .checkbox:not(checked) + label:after { content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; } .checkbox:checked + label:before { background: #9FD468; } .checkbox:checked + label:after { left: 26px; } .checkbox:focus + label:before { box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); }

CSS-код для радиокнопки :

Radio { vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; } .radio + label { cursor: pointer; } .radio:not(checked) { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .radio:not(checked) + label { position: relative; padding: 0 0 0 35px; } .radio:not(checked) + label:before { content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; } .radio:not(checked) + label:after { content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; } .radio:checked + label:after { opacity: 1; } .radio:focus + label:before { box-shadow: 0 0 0 3px rgba(255,255,0,.7); }

Примеры

Вот таким несложным образом это и делается. Благодаря данному способу, оформить чекбоксы и радиокнопки с помощью CSS можно так, как вам будет угодно.

Всем доброго времени суток!

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

К сожалению, одного только CSS частенько не достаточно, чтобы с легкостью оформить тот или иной элемент формы. Наверное поэтому многие используют штуки вроде Uniform для своих форм. Лично я всегда стараюсь сократить количество Javascript, используемого в подобных целях, поэтому хочу рассказать о совершенно нативном HTML+CSS методе кастомизации радио-кнопок и чекбоксов.

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

Поехали!

Итак, сразу поставим цель: оформить чекбоксы и радио-кнопки, чтобы внешне они были похожи на js-магию Uniform , но сделать это максимально простым, нативным по отношению в HTML и CSS способом, а также избежать применения лишних тегов, сохраняя семантику. Как-то так.

Основная идея строится на нативном «умении» HTML тега label устанавливать связь с определенным элементом формы. Собственно и все, дальше только код.
Разметка
<ul >
<li >
<input id = "cfirst" type = "checkbox" name = "first" checked hidden / >
<label for = "cfirst" > Checked checkbox</ label >
</ li >
<li >
<input id = "csecond" type = "checkbox" name = "second" hidden / >
<label for = "csecond" > Unchecked checkbox</ label >
</ li >
<li >
<input id = "cthird" type = "checkbox" name = "third" hidden disabled / >
<label for = "cthird" > Disabled checkbox</ label >
</ li >
<li >
<input id = "clast" type = "checkbox" name = "last" checked hidden disabled / >
<label for = "clast" > Disabled checked checkbox</ label >
</ li >
</ ul >
<ul >
<li >
<input id = "rfirst" type = "radio" name = "radio" checked hidden / >
<label for = "rfirst" > Checked radio</ label >
</ li >
<li >
<input id = "rsecond" type = "radio" name = "radio" hidden / >
<label for = "rsecond" > Unchecked radio</ label >
</ li >
<li >
<input id = "rthird" type = "radio" name = "radio" hidden disabled / >
<label for = "rthird" > Disabled radio</ label >
</ li >
</ ul >

Совершенно нативная разметка. Использование label вместе с input прям как из учебников. Важным моментом является только то, что нужно указывать id для каждого input и for для label , чтобы связать их.

Думаю все заметили использование атрибута hidden , который скрывает сами input элементы, однако благодаря связи с label , мы все еще может манипулировать ими. В результате мы получаем что-то вроде:

Скучно совсем стало, но все работает. Теперь осталось оформить все это добро как надо. Для этого воспользуемся спрайтом , который применяется на сайте Uniform .

Оформление
input[ type= "checkbox" ] ,
input[ type= "radio" ] {
display : none ;
}
input[ type= "checkbox" ] + label,
input[ type= "radio" ] + label {
font : 18px bold ;
color : #444 ;
cursor : pointer ;
}
input[ type= "checkbox" ] + label: :before ,

content : "" ;
display : inline-block ;
height : 18px ;
width : 18px ;
margin : 0 5px 0 0 ;
background-image : url (uniformjs.com/images/sprite.png ) ;
background-repeat : no-repeat ;
}
input[ type= "checkbox" ] + label: :before {
background-position : -38px -260px ;
}
input[ type= "radio" ] + label: :before {
background-position : 0px -279px ;
}
input[ type= "checkbox" ] :checked + label: :before {
background-position : -114px -260px ;
}
input[ type= "radio" ] :checked + label: :before {
background-position : -108px -279px ;
}
input[ type= "checkbox" ] :disabled + label: :before {
background-position : -152px -260px ;
}
input[ type= "checkbox" ] :checked :disabled + label: :before {
background-position : -171px -260px ;
}
input[ type= "radio" ] :disabled + label: :before {
background-position : -144px -279px ;
}
input[ type= "radio" ] :checked :disabled + label: :before {
background-position : -162px -279px ;
} ​

Тут все так же максимально просто. Используем псевдо-элемент before для того, чтобы показывать наши «виртуальные контролы» и пользователь не заметил подмены. Части спрайта, меняем в зависимости от состояния input "а.

В результате получаем что-то вроде: