Radyo düğmeleri yerine resimleri kullanma

167

Düğmeli bir radyo grubum varsa:

Resim 1

... seçim seçeneğinde düğmeler yerine yalnızca resimleri nasıl gösterebilirim, ör.

resim açıklamasını buraya girin

html  css 
— Vignesh Pichamani
kaynak
Kodunuz için canlı bir bağlantı veya bir jsFiddle görebilir miyiz?
— Nitesh
3
Bir radyo düğmesi seti oluşturun ve bunları gizli bir div'a koyun. Görüntü tıklandığında, belirli radyo düğmesinin işaretli olduğu anlamına gelir, ilk görüntü tıklamasında, ilk radyo düğmenizi işaretli olarak ayarlayın ve benzer şekilde diğer ikisi için ayarlayın. Eğer almadıysanız ben de kodla açıklayabilirim.
— Chiragit007
— Code Guy

Yanıtlar:

387
  • Wrap radyo ve görüntü içinde<label>
  • Radyo düğmesini gizle (Kullanmadisplay:none veya visibility:hiddenerişilebilirliği etkileyeceği için)
  • Bitişik kardeş seçiciyi kullanarak gizli radyonun yanındaki görüntüyü hedefleyin +

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
Snippet'i genişlet

Etiketlerinize bir sınıf eklemeyi unutmayın ve bunun yerine CSS'de bu sınıfı kullanın.

Özel stiller ve animasyonlar

İşte <i>öğeyi ve :aftersözde kullanan gelişmiş bir sürüm :

CSS özel radyo ve onay kutusu

body{color:#444;font:100%/1.4 sans-serif;}


/* CUSTOM RADIO & CHECKBOXES
   http://stackoverflow.com/a/17541916/383904 */
.rad,
.ckb{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* RADIO & CHECKBOX STYLES */
/* DEFAULT <i> STYLE */
.rad > i,
.ckb > i{ 
  display: inline-block;
  vertical-align: middle;
  width:  16px;
  height: 16px;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 1px solid gray;
  background: gray;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
  width: 25px;
  border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: gray;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: orange;
}
/* CHECKBOX */
.ckb > input + i:after{
  content: "";
  display: block;
  height: 12px;
  width:  12px;
  margin: 2px;
  border-radius: inherit;
  transition: inherit;
  background: gray;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
  margin-left: 11px;
  background:  orange;
}
<label class="rad">
  <input type="radio" name="rad1" value="a">
  <i></i> Radio 1
</label>
<label class="rad">
  <input type="radio" name="rad1" value="b" checked>
  <i></i> Radio 2
</label>

<br>

<label class="ckb">
  <input type="checkbox" name="ckb1" value="a" checked>
  <i></i> Checkbox 1
</label>
<label class="ckb">
  <input type="checkbox" name="ckb2" value="b">
  <i></i> Checkbox 2
</label>
Snippet'i genişlet

— Roko C. Buljan
kaynak
10
Sözde seçici için +1, sanırım geçmişte seçilenleri kontrol etmek için JavaScript kullandım! Bu bana öğretecek ...
— zik
3
görünürlük gizli, tıklanamayacağı anlamına gelir ve mutlak konum, bunu belge akışından çıkarır
— 99 Sorunlar - Sözdizimi bir
1
Bu mükemmel bir cevap. Aynı şeylerin type="checkbox"de işe yarayacağını ekleyebilir miyim ?
— Wtower
Tamam bu güzel .. harika çalışıyor, görünüşe göre IE üzerinde de çalışıyor, ama aslında değil. görüntü doğru bir şekilde davranıyor ancak form gönderildiğinde küçük resim seçimi yapılmıyor. Win 8.1 ile gelen yeni IE kullanıyorum sanırım. Herhangi bir fikir?
— Junaid Rehman
3
Partiye geç, ama buna dikkat et. Visibility:hiddengirişleri ekran okuyucusundan ve büyük bir hayır erişilebilirlik açısından gizleyecektir.
— DPac
100

Misal:

Dikkat et! Bu çözüm yalnızca CSS'dir.

Kredi kartı seçici, modifiye demo MasterCard üzerine gelin.

Bunu yapmak için, varsayılan giriş radyo düğmesini CSS3 kuralları ile gizleyerek CSS3'ten yararlanmanızı öneririm :

.options input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

Birkaç gün önce bir örnek vereyim.

— Richard Cotrina
kaynak
1
Bu harikaydı! Bir ASP.NET Formuna entegre ettim ve bir cazibe gibi çalıştı :)
— Gus
Bu örnek, Firefox 49.0.2'de XUbuntu 16.04.1
— Sergey Kudriavtsev
@SergeyKudriavtsev belki kod ihtiyacı ve güncelleme (bu cevap 2013 yılından itibaren). Neyse ki kod geliştirmek için herkese açık. Yakında bir göz atacağım. Şerefe.
— Richard Cotrina
Firefox 60, Windows 10'da benim için iyi çalışıyor
— Trevor
3 gülen yüzler için bu çalışma var. Şimdi, her biri kendi gülen yüzleri olan bir formda birden fazla satıra ihtiyacım var. Benim sorunum, bir satır değiştirildiğinde, hepsinin değişmesidir. Bunu başarmak için hangi parçanın değiştirilmesi gerektiğine dair bir fikrin var mı?
— dave317
19

Bunun için CSS kullanabilirsiniz.

HTML (yalnızca demo için özelleştirilebilir)

<div class="button">
    <input type="radio" name="a" value="a" id="a" />
    <label for="a">a</label>
</div>
<div class="button">
    <input type="radio" name="a" value="b" id="b" />
    <label for="b">b</label>
</div>
<div class="button">
    <input type="radio" name="a" value="c" id="c" />
    <label for="c">c</label>
</div>
...

CSS

input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + label {
    border: 1px solid red;
}

jsFiddle

— Fracsi
kaynak
6

Radyo düğmelerini gizli tutun ve resimlere tıkladığınızda bunları JavaScript kullanarak seçin ve resminizi seçilen gibi görünecek şekilde şekillendirin. İşte işaretleme -

<div id="radio-button-wrapper">
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
</div>

ve JS

 $(".image-radio img").click(function(){
     $(this).prev().attr('checked',true);
 })

CSS

span.image-radio input[type="radio"]:checked + img{
    border:1px solid red;
}
— Moazzam Han
kaynak
4

Sadece bazılarını gizlemek için bir sınıf kullanmak ... https://stackoverflow.com/a/17541916/1815624

/* HIDE RADIO */
.hiddenradio [type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
.hiddenradio [type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
.hiddenradio [type=radio]:checked + img {
  outline: 2px solid #f00;
}
<div class="hiddenradio">
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>

<div class="">
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>
Snippet'i genişlet

— CrandellWS
kaynak
1

İşte buradaki örneğe dayanan basit bir jQuery UI çözümü:

http://jqueryui.com/button/#radio

Değiştirilmiş kod:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Radios</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>

<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
    <input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
  </div>
</form>

</body>
</html>

jQueryUI görüntünün arka planıyla ilgilenir, böylece hangi düğmenin işaretlendiğini bilirsiniz.

Dikkat: Javascript aracılığıyla işaretlenmiş veya işaretlenmemiş bir düğme ayarlamak istiyorsanız, yenileme işlevini çağırmanız gerekir:

        $('#radio3').prop('checked', true).button("refresh");
— atmelino
kaynak
0

Görüntüler, etiket ve açıklık elemanları kullanılarak radyo düğmelerinin yerine yerleştirilebilir.

   <div class="customize-radio">
        <label>Favourite Smiley</label><br>
        <label for="hahaha">
        <input type="radio" name="smiley" id="hahaha">
        <span class="haha-img"></span>
        HAHAHA
        </label>
        <label for="kiss">
        <input type="radio" name="smiley" id="kiss">
        <span class="kiss-img"></span>
        Kiss
        </label>
        <label for="tongueOut">
        <input type="radio" name="smiley" id="tongueOut">
        <span class="tongueout-img"></span>
        TongueOut
        </label>
    </div>

Radyo düğmesi gizlenmeli,

.customize-radio label > input[type = 'radio'] {
    visibility: hidden;
    position: absolute;
}

Resim span etiketinde verilebilir,

.customize-radio label > input[type = 'radio'] ~ span{
    cursor: pointer;
    width: 27px;
    height: 24px;
    display: inline-block;
    background-size: 27px 24px;
    background-repeat: no-repeat;
}
.haha-img {
    background-image: url('hahabefore.png');
}

.kiss-img{
    background-image: url('kissbefore.png');
}
.tongueout-img{
    background-image: url('tongueoutbefore.png');
}

Radyo düğmesine tıklandığında görüntüyü değiştirmek için giriş etiketine işaretli durum ekleyin,

.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
     background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
    background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
        background-image: url('tongueout.png');
}

Herhangi bir sorunuz varsa, aşağıdaki blog'dan çözüm aldığım gibi, aşağıdaki bağlantıya bakın, http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

— Acemi
kaynak
0

İşte çok basit bir örnek 

input[type="radio"]{
   display:none;
}

input[type="radio"] + label
{
    background-image:url(http://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png);
    background-size: 100px 100px;
    height: 100px;
    width: 100px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor:pointer;
}

input[type="radio"]:checked + label
{
    background-image:url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png);
}
<div>
  <input type="radio" id="shipadd1" value=1 name="address" />
  <label for="shipadd1"></label>
  value 1
</div>

<div>
  <input type="radio" id="shipadd2" value=2 name="address" />
  <label for="shipadd2"></label>
  value 2
</div>
Snippet'i genişlet

Demo: http://jsfiddle.net/La8wQ/2471/

Bu hile dayalı bu örnek: https://css-tricks.com/the-checkbox-hack/

Test ettim: krom, firefox, safari

— Kamil Kiełczewski
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.