Флажки — это HTML-элемент, который, возможно, используется на каждом веб-сайте, но большинство людей не стилизуют их, поэтому они выглядят так же, как и на любом другом сайте. Почему бы не сделать ваш сайт по-другому, используя стили для ваших флажков, вы даже можете сделать их не похожими на флажки.
В этом уроке мы собираемся создать 5 различных флажков, которые вы можете использовать на своем сайте.
Посмотрите демонстрацию, чтобы увидеть флажки, которые мы собираемся создать.
Для начала нам нужно добавить один фрагмент CSS, который понадобится каждому из следующих флажков. Нам нужно скрыть все оригинальные флажки, так как мы будем изменять их внешний вид. Для этого добавьте в свой CSS-файл следующее.
/**
* Start by hiding the checkboxes
*/
input[type=checkbox] {
visibility: hidden;
}Поскольку мы скрываем флажки, нам нужно добавить HTML-элемент метки, когда вы щелкаете метку с атрибутом for, она будет отмечена флажком. Это означает, что мы можем стилизовать метку для обработки событий щелчка для наших флажков.
Флажок первый
Этот флажок выполнен в стиле ползунка бара, он имеет отмеченную и непроверенную позицию. Когда вы нажимаете на кнопку ползунка (пометить элемент HTML), это установит флажок и переместит ползунок в положение «включено» .
Мы начнем с создания HTML-кода для области флажка.
<section>
<!-- Checbox One -->
<h3>Checkbox One</h3>
<div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxOneInput" name="" />
<label for="checkboxOneInput"></label>
</div>
</section>Поскольку мы устанавливаем этот флажок, чтобы скользить по панели, мы начинаем со стилизации панели, это будет элемент div, окружающий флажок. Нам нужно оформить это как черную полосу с закругленными углами.
/**
* Create the slider bar
*/
.checkboxOne {
width: 40px;
height: 10px;
background: #555;
margin: 20px 80px;
position: relative;
border-radius: 3px;
}Теперь мы можем стилизовать метку, чтобы она действовала как кнопка на ползунке, мы хотим, чтобы кнопка перемещалась с одной стороны ползунка на другую, чтобы мы могли добавить переход к метке.
/**
* Create the slider from the label
*/
.checkboxOne label {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
background: #ccc;
}Этот ползунок теперь будет в непроверенном (выключенном) положении, когда мы установим флажок, чтобы мы хотели, чтобы произошла реакция, чтобы мы могли переместить кнопку ползунка на другую сторону ползунка. Чтобы переместить кнопку ползунка, нам нужно знать, если флажок установлен, если это так, измените свойство left элемента label.
/**
* Move the slider in the correct position if the checkbox is clicked
*/
.checkboxOne input[type=checkbox]:checked + label {
left: 27px;
}Это все, что нужно CSS для первого флажка.
Флажок второй
Этот флажок стилизован как ползунок так же, как и флажок один, но разница в том, что эта кнопка ползунка изменит цвет, когда она находится в одном состоянии. Когда вы нажимаете кнопку ползунка, она переместится на другую сторону панели и изменит цвет кнопки.
HTML-код для этого флажка будет точно таким же, как флажок один.
<section>
<!-- Checbox Two -->
<h3>Checkbox Two</h3>
<div class="checkboxTwo">
<input type="checkbox" value="1" id="checkboxTwoInput" name="" />
<label for="checkboxTwoInput"></label>
</div>
</section>Div будет немного больше, чем в первом примере, и ползунок будет скользить внутри этой панели, используйте следующий CSS для стилизации панели.
/**
* Checkbox Two
*/
.checkboxTwo {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
}В этом примере флажка есть внутренняя панель, которая используется кнопкой для скольжения, для этого мы будем использовать псевдо-класс: before в div для создания нового элемента, который мы можем использовать в качестве внутренней панели.
/**
* Create the line for the circle to move across
*/
.checkboxTwo:before {
content: '';
position: absolute;
top: 19px;
left: 14px;
height: 2px;
width: 90px;
background: #111;
}Next we can style the label for the checkbox which is used as the button for the slider, this is going to be similar to the first checkbox.
/**
* Create the circle to click
*/
.checkboxTwo label {
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 9px;
z-index: 1;
left: 12px;
background: #ddd;
}To show the checked state of the checkbox we are going to use the same way as the first example, we are going to change the left property and change the background colour of the button.
/**
* Create the click event for the checkbox
*/
.checkboxTwo input[type=checkbox]:checked + label {
left: 84px;
background: #26ca28;
}Checkbox Three
Checkbox three goes a step further than checkbox two, it will use the same bar slider motion as the previous example but this time we will display text that will show if the checkbox is checked or not. When we click the slider button to check the checkbox, the button will slide to the other side of the bar and display text to show the checkbox is on.
First we are going to start off with the HTML for the checkbox, this is going to be the same as the previous example.
<section>
<!-- Checbox Three -->
<h3>Checkbox Three</h3>
<div class="checkboxThree">
<input type="checkbox" value="1" id="checkboxThreeInput" name="" />
<label for="checkboxThreeInput"></label>
</div>
</section>Again we are going to style the bar the same way as we did for example two. This will create a black bar with rounded corners where we can place the button and the text inside the black bar.
/**
* Checkbox Three
*/
.checkboxThree {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
}When this checkbox is unchecked the slider button will start on the left side of the bar, this means that the «Off» text can be displayed on the right side of the bar. When someone clicks the slider button we can slide this to the right of the bar, when the button slides it will display the «On» text from behind the slider button.
First we are going to create the On and Off text to place on the slider bar, for these we are going to use both the :before pseudo class and the :after pseudo class. Inside the :before element we can add a new element with contents of «On» and the :after element will have the contents of «Off».
/**
* Create the text for the On position
*/
.checkboxThree:before {
content: 'On';
position: absolute;
top: 12px;
left: 13px;
height: 2px;
color: #26ca28;
font-size: 16px;
}Now we create the Off text and position this on the right side of the bar.
/**
* Create the label for the off position
*/
.checkboxThree:after {
content: 'Off';
position: absolute;
top: 12px;
left: 84px;
height: 2px;
color: #111;
font-size: 16px;
}The rest of the slider we act just like the previous example, when we click the slider button it will move to the other side of the bar and change colour.
/**
* Create the pill to click
*/
.checkboxThree label {
display: block;
width: 52px;
height: 22px;
border-radius: 50px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 9px;
z-index: 1;
left: 12px;
background: #ddd;
}
/**
* Create the checkbox event for the label
*/
.checkboxThree input[type=checkbox]:checked + label {
left: 60px;
background: #26ca28;
}Checkbox Four
In this example we are going to create a checkbox that is styled as two circles, when you click the inner circle this will change colour to show that this is now checked.
The HTML for this checkbox is exactly the same as the previous examples.
<section>
<!-- Checbox Four -->
<h3>Checkbox Four</h3>
<div class="checkboxFour">
<input type="checkbox" value="1" id="checkboxFourInput" name="" />
<label for="checkboxFourInput"></label>
</div>
</section>Next we are going to create the outer circle for the checkbox. For this we just use the CSS property border-radius and set this to 100% so that it’s a full circle.
/**
* Checkbox Four
*/
.checkboxFour {
width: 40px;
height: 40px;
background: #ddd;
margin: 20px 90px;
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}Next we are going to create the inner circle this will be slightly smaller than the first circle and will have a different background colour. As this circle will be used as the click label this circle will be the label HTML element.
/**
* Create the checkbox button
*/
.checkboxFour label {
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background: #333;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}On the checked event of this checkbox we are going to change the background of the inner circle to show that this is checked.
/**
* Create the checked state
*/
.checkboxFour input[type=checkbox]:checked + label {
background: #26ca28;
}Checkbox Five
This checkbox is a bit different to the other boxes, it will act just like a normal checkbox but it looks a bit nicer than the standard checkboxes you get with your browsers.
Again the HTML for this checkbox is the same as the previous examples.
<section>
<!-- Checbox Five -->
<h3>Checkbox Five</h3>
<div class="checkboxFive">
<input type="checkbox" value="1" id="checkboxFiveInput" name="" />
<label for="checkboxFiveInput"></label>
</div>
</section>In the previous examples we styled the div to be the bar for the checkbox, for this checkbox we don’t need to do this. We can use the div element to set the area for the checkbox.
/**
* Checkbox Five
*/
.checkboxFive {
width: 25px;
margin: 20px 100px;
position: relative;
}This label is used for the click event this is going to be styled as the checkbox.
/**
* Create the box for the checkbox
*/
.checkboxFive label {
cursor: pointer;
position: absolute;
width: 25px;
height: 25px;
top: 0;
left: 0;
background: #eee;
border:1px solid #ddd;
}Next we are going to create the tick inside the box, for this we can use the :after pseudo class to create a new element. To make this look like a tick we create a small box 5px x 9px and add a border to this box. Then we can remove the border from two sides of this box and it will create an element that looks like an L. Now we can use the transform property to rotate the L to make it look like a tick.
/**
* Display the tick inside the checkbox
*/
.checkboxFive label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 7px;
border: 3px solid #333;
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);
}On the above tick we have set the opacity to 0.2 so you will see a semi-transparent tick inside the checkbox. You can change this on the hover event to be a bit darker and on the checked event you can make it a solid colour.
/**
* Create the hover event of the tick
*/
.checkboxFive label:hover::after {
opacity: 0.5;
}
/**
* Create the checkbox state for the tick
*/
.checkboxFive input[type=checkbox]:checked + label:after {
opacity: 1;
}This will create your new look checkbox.
View the demo to see how these checkboxes work.