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.

HTML

<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>

<br>

<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>
</div>

CSS

<style>
    @import "https://fonts.googleapis.com/css?family=Open+Sans";
html {
  box-sizing: border-box;
}

*,
*:before,
*: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;
}
</style>

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

avatar
  Subscribe  
Notify of