Pure CSS custom checkboxes

CSS Programming Technology

Today, We want to share with you Pure CSS custom checkboxes.In this post we will show you custom checkbox without label using CSS, hear for 2 Steps Simple Custom Checkbox With Pure CSS we will give you demo and example for implement.In this post, we will learn about Custom Checkbox And Radio Inputs In Pure CSS with an example.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Snippet Contents

Pure CSS custom checkboxes

There are the Following The simple About Pure CSS custom checkboxes Full Information With Example and source code.

As I will cover this Post with live Working example to develop Round Checkbox in Pure CSS, so the Completely CSS: Custom checkboxes, radio buttons and select boxes for this example is following below.

custom checkbox css tricks

HTML part

<h1 class="title">Pure CSS Custom Checkboxes</h1>

<ul class="unstyled centered">
  <li>
    <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
    <label for="styled-checkbox-1">Checkbox</label>
  </li>
  <li>
    <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value2" checked>
    <label for="styled-checkbox-2">CSS Only</label>
  </li>
  <li>
    <input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" value="value3" disabled>
    <label for="styled-checkbox-3">A disabled checkbox</label>
  </li>
  <li>
    <input class="styled-checkbox" id="styled-checkbox-4" type="checkbox" value="value4">
    <label for="styled-checkbox-4">Fourth option</label>
  </li>
</ul>

CSS part

.styled-checkbox {
  position: absolute; // take it out of document flow
  opacity: 0; // hide it

  & + label {
    position: relative;
    cursor: pointer;
    padding: 0;
  }

  // Box.
  & + label:before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: white;
  }

  // Box hover
  &:hover + label:before {
    background: #f35429;
  }
  
  // Box focus
  &:focus + label:before {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
  }

  // Box checked
  &:checked + label:before {
    background: #f35429;
  }
  
  // Disabled state label.
  &:disabled + label {
    color: #b8b8b8;
    cursor: auto;
  }

  // Disabled box.
  &:disabled + label:before {
    box-shadow: none;
    background: #ddd;
  }

  // Checkmark. Could be replaced with an image
  &:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 9px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 
      2px 0 0 white,
      4px 0 0 white,
      4px -2px 0 white,
      4px -4px 0 white,
      4px -6px 0 white,
      4px -8px 0 white;
    transform: rotate(45deg);
  }
}

// Demo-only styles
// --------------

html {
  background: lightgray;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
}

.unstyled {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  margin: 20px 0;
}

.centered {
  width: 300px;
  margin: auto;
}

.title {
  text-align: center;
  color: rgb(69, 113, 236);
}

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Pure CSS custom checkboxes.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   PHP Contact Form Send Email File Attachment Example
  2.   frontaccounting Customization create module form Components
  3.   Custom Radio Button in Vue.js Examples
  4.   Top 10 Most Popular programming languages
  5.   PHP Curl POST and GET Methods
  6.   Debugging Eloquent Queries in Laravel
  7.   How to create category menu list using css and JQuery?
  8.   Pure CSS custom Fancy checkboxes
  9.   PHP Get Dropdown list of all Timezones
  10.   JQuery Set Focus on First TextBox

Leave a Reply

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