Onay kutucukları

Css3 kullanılarak hazırlanmış olan bir checkbox  örneği. Checkboxlar onay kutusu dediğimiz tıklandığında içinde  küçük ok işareti olan kutucuklardır. Bu örneği kullanarak websitenizde  bulunan onay kutucuklarının görüntüsünü değiştirebilirsiniz. Normal onay kutularında mouse ile üzerine geldiğiniz  zaman kutu içindeki beyazlık hafif  maviye  dönüşüyordu. Bu örnekte beyaz kutular  gri renkli olarak hazırlanmış ve mouse ile onay kutularının üstüne gezdiğiniz zaman kutuların içinde biraz daha koyu renkli okey işareti beliriyor. Onay kutusunu  tıkladığınızda  ise kutu tamamen beyaz oluyor ve koyu gri renkli olan okey işaretide  siyah rengini alıyor.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

/* (just for presentation) */
body {font-family: open sans, helvetica, arial, sans-serif; font-weight: 100; color: #e5e5e5; margin: 0; background: #eee}
.window {
  background: #94babd; padding: 2em 3em 4em 2em; 
  border-top: #6E898B 16px solid; 
  border-bottom: #d0d0d0 16px solid;
  width:800px;
  margin: 0 auto;
 }

div.checkItem {clear: both; margin: 2em 0}

/*_________________________*/

input[type=checkbox] {
	visibility: hidden;/*hides default checkboxes*/
  margin: 0 -8px;
}

label.checkbox {
	cursor: pointer;
  text-indent: 3em;
  line-height: 1.5em;
  overflow: visible;
  display: inline-block;
  position: relative;
}
label.checkbox:before {
  background: #e5e5e5;
  content:'';
  position: absolute;
  top:0;
  left: 0;
  width: 1.6em;
  height: 1.6em
}

label.checkbox:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 0.7em;
	height: 0.3em;
	background: transparent;
	top: 0.5em;
	left: 0.4em;
	border: 3px solid #6E898B;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

label.checkbox:hover:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
input[type=checkbox]:checked + label:before {
  background: #fff
}

input[type=checkbox]:checked + label {
  color: #fff
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="window">
    <div class="checkItem">
      <input type="checkbox" value="None" id="checkboxOne" name="check" />
      <label for="checkboxOne" class="checkbox">Yes, sounds great</label>
    </div>

    <div class="checkItem">
      <input type="checkbox" value="None" id="checkboxTwo" name="check" />
      <label for="checkboxTwo" class="checkbox">No way, José</label>
    </div>

    <div class="checkItem">
      <input type="checkbox" value="None" id="checkboxThree" name="check" />
      <label for="checkboxThree" class="checkbox">Errrr, let me get back to you</label>
    </div>

    <div class="checkItem">
      <input type="checkbox" value="None" id="checkboxFour" name="check" />
      <label for="checkboxFour" class="checkbox">Whatchu talkin 'bout, Willis?</label>
    </div>
</div>

Onay kutusu yapmak için doğru html nedir?
Checkbox html nedir?
HTML de checked ne demek?
Checked ın ne demek?