Build a Custom Style Checkbox Input Field in Browser Using HTML5 and CSS3 Full Project For Beginners

Build a Custom Style Checkbox Input Field in Browser Using HTML5 and CSS3 Full Project For Beginners

 

Welcome folks today in this blog post we will be building a custom style checkbox input field in browser using html5 and css3. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

 

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>

 

See also  Build a Live Cricket Scoreboard Animation Design Template With Country Logo in HTML5 and CSS3 Full Project For Beginners

 

And now if you open the index.html file inside the browser you will see the below screenshot

 

 

 

Leave a Reply