Saved!

css checkbox design - ONihYTSg

HTML CSS JavaScript Frontend Development

  
  <div class="holder">
  <h1>Checkbox Styles with SVG</h1>
  <div class="checkbox">
    <input type="checkbox" class="check" id="check1"/>
    <label for="check1" class="label">
      <svg viewBox="0 0 100 100" height="50" width="50">
        <rect x="30" y="20" width="50" height="50" stroke="black" fill="none" />
        <g transform="translate(0,-952.36216)" id="layer1">
          <path id="path4146" d="m 55,978 c -73,19 46,71 15,2 C 60,959 13,966 30,1007 c 12,30 61,13 46,-23" fill="none" stroke="black" stroke-width="3" class="path1" />
        </g>
      </svg> <span>Checkbox style 1</span>

    </label>
  </div>
  <div class="checkbox">
    <input type="checkbox" class="check" id="check2" />
    <label for="check2" class="label">
      <svg width="50" height="50" viewbox="0 0 100 100">
        <rect x="30" y="20" width="50" height="50" stroke="black" fill="none" />
        <g transform="translate(0,-952.36222)">
          <path d="m 56,963 c -102,122 6,9 7,9 17,-5 -66,69 -38,52 122,-77 -7,14 18,4 29,-11 45,-43 23,-4 " stroke="black" stroke-width="3" fill="none" class="path1" />
        </g>
      </svg>
      <span>Checkbox style 2</span>
    </label>
  </div>
  <div class="checkbox">
    <input type="checkbox" class="check" id="check3" />
    <label for="check3" class="label" style="position:absolute;left:0;margin-top:20px">
      <svg width="500" height="50" viewBox="0 0 500 100">
        <rect x="-220" y="0" width="50" height="50" stroke="black" fill="none" />
        <g transform="translate(0,-972.36216)">
          <path d="m 230,980 -166,5 c -709,22 289,89 215,18 -37,-36 -537,-46 -478,23" stroke="black" fill="none" class="path2" stroke-width="3" />
        </g>
      </svg>
      <span style="margin-top:-50px;margin-left:50px">Checkbox style 3</span>
    </label>
  </div>
  <div class="checkbox">
    <input type="checkbox" class="check" id="check4" />
    <label for="check4" class="label" style="position:absolute;left:0;margin-top:8px;margin-left:-80px;">
      <svg width="500" height="50" viewBox="0 0 500 100" style="margin-top:10px;">
        <rect x="-60" y="0" width="50" height="50" stroke="black" fill="none" />
        <g transform="translate(0,-972.36216)">
          <path d="m -50,1010 c 7,9 16,-43 20,-31 0.19,0.60 -7,35 -5,33 2,-2 26,-33 27,-32 3,3 -18,29 -12,32 12,6 20,-41 30,-31 7,7 -15,37 -6,31 9,-6 13,-22 23,-27 8,-4 -10,34 -2,28 2,-1 26,-28 30,-25 2,2 -11,16 -8,22 1,3 29,-17 29,-20 0,-7 -8,16 -4,23 3,6 21,-25 24,-25 6,0 -5,27 -2,21 4,-9 23,-33 23,-22 0,9 -16,28 -6,28 5,0 17,-14 21,-18 14,-15 11,-12 7,4 -0,3 -1,16 -1,12 0,-9 13,-24 21,-28 0,-0.36 -6,27 -2,28 9,3 26,-22 32,-28 5,-6 -3,29 3,25 5,-3 18,-27 26,-27 0.89,0 -9,22 -5,26 4,4 24,-17 29,-20 3,-1.63 -7,14 -4,18 2,2 16,-19 18,-21 1,-1 -9,24 7,11 4,-3 14,-15 21,-15 1,0 -17,37 -3,24 30,-28 -17,12 9,-10 23,-20 0.90,9 12,7 19,-4 16,-28 16,5 0,7 7,-17 15,-17 1,0 -1,17 -0.96,17 5,-2 14,-19 20,-19 1,0 -3,11 -1,13 5,6.1 19,-24 19,-16 0,1 -5,17 -3,17 1,0 12,-12 12,-11 0.50,2 -1,12 0.96,13 12,4 14,-30 14,-1 "
          fill="none" stroke="black" class="path2" stroke-width="3" />
        </g>
      </svg>
      <span style="margin-top:-50px;margin-left:130px">Checkbox Style 4 </span>
    </label>
  </div>
  <div class="checkbox">
    <input type="checkbox" class="check" id="check5" />
    <label for="check5" class="label">
      <svg width="500" height="50" viewBox="0 0 500 50" style="">
        <rect x="15" y="20" width="25" height="25" stroke="black" fill="none" stroke-opacity=".5" />
        <g transform="translate(0,-1002.3622)">
          <path d="m 15,1033 c 11,-9 27,2 39,-1 4,-1 7,-3 12,-3 11,0 20,2 30,7 5,2 42,2 48,0 4,-2 8,-3 13,-6 7,-3 26,0 35,0 14,0 28,-3 42,-3 37,0 73,6 107,-2 6,-1 18,-0.01 24,2 3,1 7,-0 11,0 21,4 42,2 63,-4 14,-4 49,12 55,7" stroke="black" fill="none" stroke-width="3"
          class="path2" />
        </g>
      </svg>
      <span style="position:absolute;top:10px;margin-left:50px">Checkbox style 5</span>
    </label>
  </div>
  <div class="checkbox">
    <input type="checkbox" class="check" id="check6" />
    <label for="check6" class="label">
      <svg width="50" height="50" viewBox="0 0 100 100">
        <rect x="30" y="20" width="50" height="50" stroke="black" fill="none" />
        <g transform="translate(0,-952.3622)">
          <path d="m 21,972 c -2,53 10,38 56,38 -3,-8 -7,-15 -14,-21 2,5 15,18 15,22 0,0.11 -2,-0.15 -2,0 -1,1 -2,1 -4,2 -4,2 -10,8 -12,10 " stroke="black" fill="none" stroke-width="3" class="path1" />
        </g>
      </svg>
      <span>Checkbox style 6</span>
    </label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="check7" class="check" />
    <label for="check7" class="label">
      <svg width="50" height="50" viewbox="0 0 100 100">
        <rect x="30" y="20" width="50" height="50" stroke="black" fill="none" />
        <g transform="translate(0,-952.36218)">
          <path d="m 13,983 c 33,6 40,26 55,48 " stroke="black" stroke-width="3" class="path1" fill="none" />
          <path d="M 75,970 C 51,981 34,1014 25,1031 " stroke="black" stroke-width="3" class="path1" fill="none" />
        </g>
      </svg>
      <span>Checkbox style 7</span>
    </label>
  </div>
</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