Nếu tôi có một nhóm radio có nút:

... Làm thế nào tôi có thể chỉ hiển thị hình ảnh trong tùy chọn chọn thay vì các nút, ví dụ:

• Gói radio và hình ảnh trong<label>
• Ẩn nút radio (Không sử dụng display:nonehoặc visibility:hiddenvì như vậy sẽ ảnh hưởng đến khả năng truy cập)
• Nhắm mục tiêu hình ảnh bên cạnh đài phát thanh ẩn bằng cách sử dụng bộ chọn anh chị em liền kề +

/* 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>

_{Đừng quên thêm một lớp vào nhãn của bạn và trong CSS sử dụng lớp đó thay thế.}

Phong cách tùy chỉnh và hình ảnh động

Đây là phiên bản nâng cao sử dụng <i>phần tử và :aftergiả:

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>

Thí dụ:

Đứng lên! Giải pháp này chỉ dành cho CSS.

Tôi khuyên bạn nên tận dụng CSS3 để làm điều đó, bằng cách ẩn nút radio đầu vào theo mặc định với các quy tắc CSS3:

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

Tôi chỉ làm một ví dụ vài ngày trước.

• Câu đố
• Cách sử dụng hình ảnh cho các nút radio - Gist

Bạn có thể sử dụng CSS cho điều đó.

HTML (chỉ dành cho bản demo, nó có thể tùy chỉnh)

<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

Giữ các nút radio và khi nhấp vào hình ảnh, chọn chúng bằng JavaScript và định kiểu hình ảnh của bạn để nó trông giống như được chọn. Đây là đánh dấu -

<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>

và JS

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

CSS

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

Chỉ sử dụng một lớp để chỉ ẩn một số ... dựa trên 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>

Đây là một giải pháp UI UI đơn giản dựa trên ví dụ ở đây:

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

Mã sửa đổi:

<!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 chăm sóc nền hình ảnh để bạn biết nút nào được kiểm tra.

Chú ý: Nếu bạn muốn đặt nút thành kiểm tra hoặc bỏ chọn qua Javascript, bạn phải gọi chức năng làm mới:

        $('#radio3').prop('checked', true).button("refresh");

Hình ảnh có thể được đặt thay cho các nút radio bằng cách sử dụng các yếu tố nhãn và nhịp.

   <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>

Nút radio nên được ẩn,

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

Hình ảnh có thể được đưa ra trong thẻ span,

.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');
}

Để thay đổi hình ảnh khi nhấp vào nút radio, hãy thêm trạng thái đã chọn vào thẻ đầu vào,

.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');
}

Nếu bạn có bất kỳ truy vấn nào, hãy tham khảo liên kết sau, Như tôi đã lấy giải pháp từ blog bên dưới, http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

Đây là ví dụ rất đơn giản

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>

Bản trình diễn: http://jsfiddle.net/La8wQ/2471/

Ví dụ này dựa trên thủ thuật này: https://css-tricks.com/the-checkbox-hack/

Tôi đã thử nó trên: chrome, firefox, safari