На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Внешний вид radiobutton


Переключатели на html-страницах сайтов широко распространены и очень удобны. Например, в одном из последних заказов необходимо было создать страничку с целым набором radiobutton – что-то типа теста с вопросами и итоговым выводом в конце в зависимости от результатов. Сама задача большого внимания не заслуживает, а вот оформление переключателей показалось интересным вывести в отдельную заметку, вдруг кому и пригодится.

Итак, перейдем сразу к тому, что у нас получается на месте стандартных переключателей:

Сколько вы знаете языков программирования?

     0

     1

     2

     3

     4 и более


Симпатично, не правда ли? И делается не так уж и сложно. По сути мы просто используем псевдоэлементы и закрываем исходный radiobutton. Причем все делается на чистом CSS, без JavaScript – так что по идее будет работать на всех браузерах и всех устройствах. Верстка переключателей выше:

<div class="vopros">
Сколько вы знаете языков программирования?<br /><br />
<input type="radio" name="dop" value="0" class="perek" checked><div >     0</div><br />
<input type="radio" name="dop" value="1" class="perek"><div >     1</div><br />
<input type="radio" name="dop" value="2" class="perek"><div >     2</div><br />
<input type="radio" name="dop" value="3" class="perek"><div >     3</div><br />
<input type="radio" name="dop" value="4" class="perek"><div >     4 и более</div><br />
</div>
Их стили:

<style>
.vopros{
    text-align: left;
    width: 50%;
    margin-left: 10%;
    box-shadow: 0 10px 45px rgba(0,0,0,.15);
    padding: 15px;
}
.vopros div {
margin-top: 5px;
}
.perek{
    position: relative;
	    float: left;
}
    input[type='radio']:before {
width: 24px;
    height: 24px;
    border-radius: 24px;
    top: -3px;
    left: -3px;
    position: relative;
    background-color: white;
    content: '';
    display: block;
    visibility: visible;
    border: 2px solid #dbe3ef;
    }

    input[type='radio']:checked:before {
width: 24px;
    height: 24px;
    border-radius: 24px;
    top: -3px;
    left: -3px;
    position: relative;
    background-color: #4caf50;
    content: '';
    display: block;
    visibility: visible;
    border: 2px solid #dbe3ef;
    }

input[type='radio']:checked:after {
content: '';
background-color: #fff;
height: 8px;
    width: 8px;
    top: 7px;
    left: 7px;
    position: absolute;
    border-radius: 50%;
    }
</style>
Вот так просто можно красиво оформить переключатели radiobutton на чистом CSS. Если есть вопросы - пишите, я за плату проконсультирую вас по любым вопросам сайтостроительства и верстки.




тегизаметки, верстка, CSS, radiobutton, улучшение внешнего вида





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Есть ли флеш в браузере?
Перенос сайта на другую CMS


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.