style check buttons

style check buttons css

by yogesh D V

HTML

<ul>
<li>
  <div class="checkbox">
	<input name="filter_price0" id="offer_407" type="checkbox" value="407" hidden >
	<label for="offer_407">
	Below 500 Rs
	</label>
</div>
</li>
<li>
  <div class="checkbox">
	<input name="filter_price0" id="offer_407" type="checkbox" value="407" hidden >
	<label for="offer_407">
	Below 500 Rs
	</label>
</div>
</li>
<li>
  <div class="checkbox">
	<input name="filter_price0" id="offer_405" type="checkbox" value="407" hidden >
	<label for="offer_405">
	Below 500 Rs
	</label>
</div>
</li>
<li>
  <div class="checkbox">
	<input name="filter_price0" id="offer_408" type="checkbox" value="407" hidden >
	<label for="offer_408">
	Below 500 Rs
	</label>
</div>
</li>
<li>
  <div class="checkbox">
	<input name="filter_price0" id="offer_409" type="checkbox" value="407" hidden >
	<label for="offer_409">
	Below 400 Rs
	</label>
</div>
</li>
</ul>

CSS

.checkbox input[type="checkbox"]:checked + label:before {
    background-color: #424242;
    border-color: #424242;
     content: "\2713";
     display: inline-block;
     text-align: center;
     color:#fff;
}
li{
  list-style-type:none;
  margin-top:10px;
}
.checkbox label{
  cursor:pointer;
}
.checkbox label:before {
    content: "";
    cursor:pointer;
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    border: 1px solid #cccccc;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}