Loading

CSS – Customize Checkbox Input Field

Post Content
Customize Checkbox Input Field

How to Customize Checkbox Input Field – CSS

Learn how to customize checkbox input field using pure CSS.

Customize Checkbox Input Field

Follow coming steps:

First: Best Using for HTML code is (Label has input), like this:

<label for="remember">
<input type="checkbox" name="remember" id="remember">
Remember Me
</label>

Don’t forget to fill (for – name – id) attributes for label and input as shown in the code, [ for=”” ] value must equal [ id=”” ], to can check the input field by clicking on it’s label.

Second: Customizing input field using CSS:

Select the input field into CSS file:

label input {
/* CSS attributes go here */
}

CSS Attributes:

  1. Removing the standard browser formatting from the input.
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  2. Resizing the input field.
    width: 14px;
    height: 14px;
  3. Making borders for the input field.
    border: 1px solid #000;

ThirdCreating a sign to appears when the input filed is checked:

To select the input field as “checked” into CSS file:

label input:checked { }

To create the sign which will appear when clicking on the label or on the input field, you should use the selector ( :after ).

So to create this sign  after the checked input, use the following selector:

label input:checked:after {
/* CSS attributes go here */
}

CSS Attributes:

The content of the sign:

content: '*';

After doing the previous steps, you just need some more styles to enhance the appearance of the input filed and the label elements.

 

Show full code on CODEPEN using following URL:

Customizing Checkbox Input Field – CODEPEN

Enjoy it.

Write a comment

Your email address will not be published. Required fields are marked *

*