How To Create a Custom Checkbox and Radio Buttons CSS

Bootstrap Radio Button css
Bootstrap Radio Button css
Bootstrap Radio Button css

Hello friends today in this article i am going to provides you beautiful CSS for Group Radio Button, here you can customised this group radio button as you wish.

In this article i will provide the complete source code and group radio button templates with free download.


<div class="schauhanradio">
	<input type="radio" class="radiobt" name="mobile" value="1" id="button1" checked />
	<label for="button1">NOKIA</label>
	<input type="radio" class="radiobt" name="mobile" value="2" id="button2" />
	<label for="button2">SAMSUNG</label>
	<input type="radio" class="radiobt" name="mobile" value="3" id="button3" />
	<label for="button3">SONY</label>


<div class="schauhanradio">
	<input type="radio" class="radiobt" name="sub" value="1" id="4" checked />
	<label for="4">HINDI</label>
	<input type="radio" class="radiobt" name="sub" value="2" id="5" />
	<label for="5">ENGLISH</label>
	<input type="radio" class="radiobt" name="sub" value="3" id="6" />
	<label for="6">HISTORY</label>
    <input type="radio" class="radiobt" name="sub" value="3" id="7" />
	<label for="7">SCIENCE</label>
    <input type="radio" class="radiobt" name="sub" value="3" id="8" />
	<label for="8">PHYSICS</label>


    @import "";
html {
  box-sizing: border-box;

*:after {
  box-sizing: inherit;

body {
  font-family: 'Open Sans', sans-serif;

.schauhanradio {
  clear: both;
  display: inline-block;

.radiobt {
  position: absolute;
  left: -9999em;
  top: -9999em;
.radiobt + label {
  float: left;
  padding: .5em 1em;
  cursor: pointer;
  border: 1px solid #dd9803;
  margin-right: -1px;
  color: #000;
  background-color: #ffba26;

.radiobt:checked + label {
  background-color: #efa300;

HTML input type=”radio” | CSS radio button group | Bootstrap Radio Button CSS | Multiple radio button groups in one form | styling checkboxes css-tricks

Leave a Reply

Notify of