CSS стилизация checkbox и radio для мобильных устройств

Сделать чекбоксы input[type="checkbox"] и радиокнопки input[type="radio"] красивыми – задача не сложная. Однако, чаще всего, за этим следует добавление новых элементов, а следовательно и усложнение DOM-структуры документа.

Для современных мобильных браузеров, а также декстопных браузеров на основе WebKit и Blink (Chrome, Opera, Vivaldi и т.д.), для некоторых типов инпутов можо создавать псевдо-элементы after и before.

ДЕМО

Checkboxes and radios

Что же написано в коде?

HTML:

<h2>Checkboxes</h2>
<label>
   <input type="checkbox">
  Checkbox
</label>
<label>
   <input type="checkbox">
  Checkbox 2
</label>
<label>
   <input type="checkbox">
  Checkbox 3
</label>

  <h2>Radios</h2>

<label>
   <input type="radio" name="name">
  Radio 1
</label>
<label>
   <input type="radio" name="name">
  Radio 2
</label>
<label>
   <input type="radio" name="name">
  Radio 3
</label>

Ничего лишнего – только label и input.

CSS:

label
{
    font: 16px helvetica;
    line-height: 18px;

    position: relative;

    display: block;

    margin-bottom: 20px;

    cursor: pointer;

    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* CHECKBOXES */

input[type='checkbox']
{
    margin-right: 20px;
    display: inline-block;
    vertical-align: middle;
}

input[type='checkbox']:after
{
    font-size: 0;
    font-family: 'times new roman';
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 22px;
    height: 22px;

    content: '\2714';
    -webkit-transition: all .1s linear;
       -moz-transition: all .1s linear;
            transition: all .1s linear;
    text-align: center;

    color: #fff;
    border: 1px solid #333;
    border-radius: 2px;
    background-color: #fff;

    box-sizing: border-box;
}

input[type='checkbox']:checked:after
{
    font-size: 18px;

    background-color: #07b4d3;
            text-shadow: 1px 1px 0 #05a4c1;

    -webkit-text-shadow: 1px 1px 0 #05a4c1;
       -moz-text-shadow: 1px 1px 0 #05a4c1;
}

/* RADIOS */

input[type='radio']
{
    margin-right: 20px;
}

input[type='radio']:after
{
    font-size: 0;
    font-family: 'times new roman';
    line-height: 18px;

    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 22px;
    height: 22px;

    content: '\25CF';
    -webkit-transition: all .1s linear;
       -moz-transition: all .1s linear;
            transition: all .1s linear;
    text-align: center;

    color: #fff;
    border: 1px solid #333;
    border-radius: 50%;
    background-color: #fff;
            text-shadow: 1px 1px 0 #05a4c1;

    -webkit-text-shadow: 1px 1px 0 #05a4c1;
       -moz-text-shadow: 1px 1px 0 #05a4c1;

    box-sizing: border-box;
}

input[type='radio']:checked:after
{
    font-size: 24px;

    background-color: #07b4d3;
}

Здесь тоже ничего трудного. Создается новый псевдо-элемент для каждого из инпутов, в контенте которого используются стандартные символы шрифта times new roman.

Напомню, что пока из-за отсутствия поддержки псевдо-элементов для input данный способ не работает в Firefox и IE.

CSS стилизация checkbox и radio для мобильных устройств

Комментарии