Sitemap / Advertise

Information



Tags



Share

How to customize an input checkbox in CSS

Advertisement:


read_later

Read Later

Keywords



Keywords



read_later

Read Later

Information

Tags

Share





Advertisement

Advertisement




Definition

There are various options to create an HTML Form by using input elements such as radio buttons and text inputs. The input element in HTML Forms is the most important element when you want to provide a plain and simple form format to users.

How an <input> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is text.(1)

Nevertheless, there is only one remaining problem about the input element; all of them has a default design which can be changed by using simple commands in neither CSS nor JavaScript. Therefore, if you want to customize an input element, then you must create a new one inherited by the input element. In this tutorial, I choose to design new checkbox elements as an example of the topic but you can apply the same method for any other input element types, for instance, radio buttons and color inputs.

Code

First of all, define a new checkbox container as a label.

Hide all input elements in the newCheckBox class to display the customized elements.

Create span elements having the mark class to be clicked as input checkbox elements.

By using the after pseudo-selector, write the OK symbol but do not forget to use the escaped version of it in CSS - ✓ to \2714.

When the user's pointer hovers over the newCheckBox class, change the background color of the mark class.

Select the mark class members following the checked input elements in the newCheckBox class by using the subsequent-sibling combinator in order to change the background color and display the OK symbol.

The subsequent-sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.(2)


/* --------- CSS ---------- */

.CheckBox{position:relative;width:80%;height:auto;margin:auto;background-color:#EE1D23;border:2px solid white;border-radius:50px;}

.newCheckBox {display: block;position: relative;cursor: pointer;font-size: 25px;color:#FAAF18;user-select: none;padding-left:35px;margin-left:20px;}

.newCheckBox input {position: absolute;height: 0;width: 0;}

.mark {position: absolute;top: -4px;left: 0;height: 30px;width: 30px;background-color: slategrey;}

.mark:after {content: "\2714";position: absolute;top:5px;right:5px;display: none;color:white;}

.newCheckBox:hover .mark {background-color: #cccccc;}

.newCheckBox input:checked ~ .mark {background-color: #185494;}

.newCheckBox input:checked ~ .mark:after {display: block;}


/* --------- HTML ---------- */

<div class="CheckBox">
<br><br>
<label class="newCheckBox"> Apple <input type="checkbox" /> <span class="mark"></span> </label><br>
<label class="newCheckBox"> Microsoft <input type="checkbox" /> <span class="mark"></span> </label><br>
<label class="newCheckBox"> Google <input type="checkbox" checked /> <span class="mark"></span> </label><br>
<label class="newCheckBox"> Twitter <input type="checkbox" /> <span class="mark"></span> </label><br>
<label class="newCheckBox"> Facebook <input type="checkbox" /> <span class="mark"></span> </label><br>
<br><br>
</div>

Result:












References

(1) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

(2) https://www.w3.org/TR/selectors-3/#general-sibling-combinators