Pure CSS custom checkboxes

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.

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 :

• Jobs
• Make Money
• Programming

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.