Resimleri kullanmak istiyorum ve kullanıcı görüntüyü tıklattığında, standart bir onay kutusu için bir alternatif temelde, gider ve onay kutusu kaplamak istiyorum.

Esasında, belirli bir ölçüte uyan tıklayın görüntüler için geldiğinde Tuttum 2 gibi bir şey yapmak istiyorum. 24 ** ama bazen görüntü seçimi aksine metin soruları çözmek için ihtiyacın olabilir. Burada bir ekran görüntüsü:

Seni görüntülerden birini tıklatın (bu durumda, biftek resmini içeren) zaman boyutunu küçültür tıklayın ve mavi kene resmi, bilet aldın gösteren görünür.

Hadi bu tam örnek çoğaltmak istiyorum söylüyorlar.

9 gizli kutularını ben biliyorum, Ve ben resmi tıklayın/gizli onay kutusu seçimini kaldırır seçer, böylece bazı jQuery Ekle. Ama ne resmin etrafındaki kene kaplayan/?

Saf semantik/CSS çözüm HTML

Bu kolay kendi başına uygulamak için, önceden yapılmış hiçbir çözüm gerekli. Ayrıca CSS ile çok kolay görünmüyorsun olarak sana çok şey öğretecektir.

Bu yapmanız gereken budur:

Senin kutularını id farklı nitelikleri olması gerekir. Bu size <label> bir bağlanma sağlar, etiket kullanarak for-öznitelik.

Örnek:

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>

Biri etiketi (veya içinde görüntü) tıkladığında, bu onay kutusu seçili olacak. checkbox için etiket tarayıcı davranışları tetikler ekleme:

Sonraki, örneğin display: none; uygulayarak onay kutusunu gizlemek.

Şimdi kalan tek şey sahte elemanı (checkbox değiştirme elemanları) önce etiket için istediğiniz stili ayarlayın::

label:before {
    background-image: url(../path/to/unchecked.png);
}

Dün zor bir adım, CSS kullanımı' :checked onay kutusu işaretli olduğunda, görüntüyü değiştirmek için seçici:

:checked   label:before {
    background-image: url(../path/to/checked.png);
}

*15.* ( ^em>bitişik kardeş seçicisi) sadece doğrudan biçimlendirme gizli onay kutusunu izleyen etiketleri değiştirmek sağlar.

Bir spritemap her iki görüntü koymak ve sadece background-position bir değişiklik uygulamak yerine görüntüyü takas ederek iyileştirebilirsiniz.

Tabii ki etiket doğru pozisyon ve display: block; ve set doğru width height uygulamak gerekir.

Düzenleme:

Bu talimatları sonra oluşturulan codepen örnek ve parçacık, aynı tekniği kullanınama kutuları için görüntüleri kullanmak yerine, checkbox değiştirmeleri tamamen CSS ile yapılırişaretli bir kez, content: "✓"; :before etiket oluşturma. Bazı yuvarlak sınırları ve tatlı geçişler ekleyin ve sonucu gerçekten çok hoş!

Burada tekniğini sergiliyor ve onay için görüntüleri gerektirmeyecek bir çalışma codepen:

http://codepen.io/anon/pen/wadwpx

Burada bir parçasında: aynı kodu

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="cb"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
}

label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked   label {
  border-color: #ddd;
}

:checked   label:before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked   label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

<ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="http://lorempixel.com/100/100" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="http://lorempixel.com/101/101" /></label>
  </li>
  <li><input type="checkbox" id="cb3" />
    <label for="cb3"><img src="http://lorempixel.com/102/102" /></label>
  </li>
  <li><input type="checkbox" id="cb4" />
    <label for="cb4"><img src="http://lorempixel.com/103/103" /></label>
  </li>
</ul>