CSS onay kutusu giriş stili

Herhangi bir stil, inputher girdi öğesini etkiler. Her onay kutusu öğesine bir sınıf uygulamadan yalnızca onay kutularına uygulanacak stili belirtmenin bir yolu var mı?

CSS 2 ile şunları yapabilirsiniz:

input[type='checkbox'] { ... }

Bu şimdiye kadar oldukça yaygın bir şekilde desteklenmelidir. Tarayıcı desteğine bakın

Etiketsiz kendi çözümümü yaratıyorum

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

Son zamanlarda Radyo Düğmeleri VE Onay Kutularını şekillendirmek için keşfettiğim bir şey. Daha önce, jQuery ve diğer şeyleri kullanmak zorunda kaldım. Ama bu çok basit.

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

Anlaşılan, bir onay kutusu için aynı şeyi değiştirebilir input[type=radio]için input[type=checkbox]ve değişim border-radius:15px;için border-radius:4px;.

Umarım bu sizin için biraz yararlıdır.

Sınıflar da iyi çalışır, örneğin:

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>

Aşağıdakileri yaparak yalnızca belirli özelliklere başvurabilirsiniz:

input[type="checkbox"] {...}

Bunu açıklar burada .

input[type="checkbox"] {
 /* your style */
}

Ancak bu yalnızca IE7 ve altı dışındaki tarayıcılarda işe yarar, bir sınıf kullanmanız gerekenler için.

Trident , ::-ms-checkonay kutusu ve radyo düğmesi kontrolleri için sözde öğe sağlar. Örneğin:

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

Bu, Windows 8'deki IE10'da aşağıdaki gibi görüntülenir:

IE6 öznitelik seçicileri anlamadığından, yalnızca IE6 (koşullu yorumlarla) ve jQuery veya IE7.js tarafından görülen bir komut dosyasını Dean Edwards tarafından birleştirebilirsiniz.

IE7 (.js), Microsoft Internet Explorer'ın standartlara uygun bir tarayıcı gibi davranmasını sağlayan bir JavaScript kitaplığıdır. Birçok HTML ve CSS sorununu giderir ve şeffaf PNG'nin IE5 ve IE6 altında düzgün çalışmasını sağlar.

Sınıflar veya jQuery veya IE7.js kullanma seçeneği, beğenilerinize ve beğenmediğiniz kişilere ve diğer gereksinimlerinize bağlıdır (IE6'da 1 bit şeffaflığa geri dönüş yapan tam şeffaflığa sahip PNG-8'e güvenmek zorunda kalmadan belki de siteniz genelinde PNG-24 şeffaflığı). - yalnızca Fireworks ve pngnq vb. tarafından oluşturulur)

CSS, onay kutusu türüne veya başka bir türe özgü stili yapmanız için bir yol sunsa da, bunu desteklemeyen tarayıcılarda sorunlar olacaktır.

Bu durumda tek seçeneğiniz sınıfları onay kutularınıza uygulamak olacaktır.

class = "checkbox" ı onay kutularınıza eklemeniz yeterlidir.

Ardından css kodunuzda bu stili oluşturun.

Yapabileceğiniz bir şey şudur:

main.css

input[type="checkbox"] { /* css code here */ }

ie.css

.checkbox{ /* css code here for ie */ }

Sonra IE özgü css içerir kullanın:

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

IE'de çalışması için yine de sınıfı eklemeniz gerekir ve IE'yi desteklemeyen diğer IE olmayan tarayıcılarda çalışmaz. Ancak, web sitenizi css kodu ile ileri görüşlü hale getirecek ve IE destek aldıkça, belirli css kodunu ve ayrıca css sınıflarını onay kutularından kaldırabileceksiniz.