Build a Custom Style Checkbox Input Field in Browser Using HTML5 and CSS3

Using this article, you can implement this Build a Custom Style Checkbox Input Field in Browser Using HTML5 and CSS3 here. We will start the discussion below to successfully implement this task.

Attempting to customize checkboxes directly by using CSS properties such as background or border will not give the desired result because most form elements are part of the browser and will not accept most visual styling. So we need to find another way to style the checkboxes.

Build a Custom Style Checkbox Input Field in Browser Using HTML5 and CSS3

Build a Custom Style Checkbox Input Field in Browser Using HTML5 and CSS3

Custom Style Checkbox Input Field in Browser Using HTML5 and CSS3

index.html

<div class="new">
  <form>
    <div class="form-group">
      <input type="checkbox" id="html">
      <label for="html">HTML</label>
    </div>
    <div class="form-group">
      <input type="checkbox" id="css">
      <label for="css">CSS</label>
    </div>
    <div class="form-group">
      <input type="checkbox" id="javascript">
      <label for="javascript">Javascript</label>
    </div>
  </form>
</div>
<style>
  /* This css is for normalizing styles. You can skip this. */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}




.new {
  padding: 50px;
}

.form-group {
  display: block;
  margin-bottom: 15px;
}

.form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.form-group label {
  position: relative;
  cursor: pointer;
}

.form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
}

.form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
</style>

Read Also: How to Center Div on Page or Screen in Horizontal and Vertical Direction Using HTML and CSS

Final Words

I hope this article helps you to understand Build a Custom Style Checkbox Input Field in Browser Using. If you encounter any issues let me know via the comment section.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment