Saved!

css checkbox - J3YPtsXN

HTML CSS JavaScript Frontend Development

  
  <style>
	.checkbox{
	    margin: 10px 20px;
	  }
	    input[type=checkbox] {
	        display:none;
	    }
	
	    input[type=checkbox] + label{
	        border: 2px solid #FFFFFF;
	        outline: 2px solid #000000;
	        height: 16px;
	        width: 16px;
	        display:inline-block;
	        padding: 0;
	        cursor: pointer;
	    }
	
	    input[type=checkbox]:checked + label{
		background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlElEQVQ4T6WTXQ2AMAwGDwdIQAISQAEWsIQCQAkWkIAEJJCSNCljP7Dtdblb26+rKDxVIU+uoAY2YMoRKNwC61/BAwbGP4IXLPP7KvDCVtAARyCRIKyCBRiAHtgdSRRWwQjMwOlIkrBtwZVIO5LzHZVMO7RwdohWIoIk7EtBJXIXfVkr8sUoki5Wtm3n6x4E/1yx4AI+qiERKNFzCwAAAABJRU5ErkJggg==") #FFFFFF;
	        height: 16px;
	        width: 16px;
	        display:inline-block;
	        padding: 0;
	    }
	
	    .checkbox-text{
	        position: relative;
	        font-family: Arial;
	        font-size: 14px;
	        padding: 0 6px;
	        top: -4px;
	        cursor: pointer;
	    }
	}
	
	.radio{
	    margin: 10px 20px;
	  }
	    input[type=radio] {
	        display:none;
	    }
	
	    input[type=radio] + label{
	        border: 2px solid #000000;
	        /* outline: 2px solid #000000; */
	        height: 18px;
	        width: 18px;
	        display:inline-block;
	        padding: 0;
	        cursor: pointer;
	        border-radius: 50%;
	    }
	
	    input[type=radio]:checked + label{
	        background:#000000;
	        height: 14px;
	        width: 14px;
	        display:inline-block;
	        padding: 2px;
	        box-shadow: inset 0 0 0 4px #FFFFFF;
	    }
	
	    .radio-text{
	        position: relative;
	        font-family: Arial;
	        font-size: 14px;
	        padding: 0 6px;
	        top: -5px;
	        cursor: pointer;
	    }
	}
</style>

<div class="checkbox">
    <input type='checkbox' name='thing1' value='valuable' id="thing1"/>
    <label for="thing1"></label>
    <label for="thing1" class="checkbox-text">Checkbox</label>
</div>

<div class="checkbox">
    <input type='checkbox' name='thing2' value='valuable' id="thing2"/>
    <label for="thing2"></label>
    <label for="thing2" class="checkbox-text">Checkbox</label>
</div>

<div class="checkbox">
    <input type='checkbox' name='thing3' value='valuable' id="thing3"/>
    <label for="thing3"></label>
    <label for="thing3" class="checkbox-text">Checkbox</label>
</div>



<div class="radio">
    <input type='radio' name='thing' value='valuable' id="radio1"/>
    <label for="radio1"></label>
    <label for="radio1" class="radio-text">Radio</label>
</div>

<div class="radio">
    <input type='radio' name='thing' value='valuable' id="radio2"/>
    <label for="radio2"></label>
    <label for="radio2" class="radio-text">Radio</label>
</div>

<div class="radio">
    <input type='radio' name='thing' value='valuable' id="radio3"/>
    <label for="radio3"></label>
    <label for="radio3" class="radio-text">Radio</label>
</div>
    
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js