使用图像而不是单选按钮

如果我有一个带有按钮的无线电组:

．.．如何在选择选项中只显示图像而不是按钮?

当前回答

例子:

小心!此解决方案仅支持css。

我建议你利用CSS3来做到这一点，通过隐藏默认输入单选按钮与CSS3规则:

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

几天前我只是举了个例子。

JSFiddle 如何使用单选按钮的图像- Gist

2013-12-06 17:42:27

其他回答

下面是一个基于示例的简单jQuery UI解决方案:

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

修改代码:

<!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负责图像背景，这样您就知道选中了哪个按钮。

注意:如果你想通过Javascript将按钮设置为选中或未选中，你必须调用refresh函数:

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

2015-02-24 02:50:14

你可以使用CSS。

HTML(仅供演示，可自定义)

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

js小提琴

2013-07-09 06:50:30

保持单选按钮隐藏，在点击图像时，使用JavaScript选择它们，并设置图像的样式，使其看起来像选中的。这是加价

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

和 JS

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

CSS

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

2013-07-09 06:50:37

通过使用标签和span元素，可以将图像放置在单选按钮的位置。

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

单选按钮应该隐藏，

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

图像可以在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');
}

点击单选按钮改变图像，在输入标签中添加选中状态，

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

如果你有任何疑问，请参考下面的链接，因为我已经从下面的博客中采取了解决方案， http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

2018-06-08 07:06:16

只是用一个类来隐藏一些…基于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>

2018-12-25 05:04:03

使用图像而不是单选按钮

推荐文章

最新文章

标签