Стиализуем Checkbox

[TopRaN 235]

Задача. Наложить стили на обычный Checkbox без js и jquery. использовав только чистый сss3
 
Решение 
1. В html (tpl) сам checkbox выглядит следующим образом:
 
<input type="checkbox" value="" id="" name="">
 
2. Теперь нам нужно создать групповую разметку 
 
<div class="squaredThree">
    <input type="checkbox" value="None" id="squaredThree" name="check">
    <label for="squaredThree"></label>
</div>

 

3. После того как разметка готова приступаем к написанию стилей.

 

input[type=checkbox] {
    visibility: hidden;
} 

 

таким образом мы скрываем к показу стандартный checkbox

 

4. Создаем стиль для разметки

.squaredThree {
    width: 20px;    
    margin: 20px auto;
    position: relative;
}

 

5. Добавляем метку и фильтры, так же не забываем про обработку в IE
.squaredThree label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    border-radius: 4px;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);

    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
    background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
    background: -o-linear-gradient(top, #222 0%, #45484d 100%);
    background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
    background: linear-gradient(top, #222 0%, #45484d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

6. Применим к нашем стилям и метки -  After. Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента
.squaredThree label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 4px;
    left: 4px;
    border: 3px solid #fcfff4;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
7. Теперь мы добавляем фильтры псевдоэлементу в режими активности (наведения)
.squaredThree label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}
8. Компонуем условие отображения.
.squaredThree input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}