使用图像而不是单选按钮

Posted 2023-03-05

技术标签:

【中文标题】使用图像而不是单选按钮【英文标题】：Use images instead of radio buttons 【发布时间】：2013-07-06 16:03:59 【问题描述】：

如果我有一个带按钮的单选组：

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

【问题讨论】：

我们可以看到您的代码的实时链接或 jsFiddle 吗？创建一个单选按钮集并将它们放在一个隐藏的 div 中。在图像点击设置上，选中的特定单选按钮意味着在第一个图像点击设置您的第一个单选按钮被选中，其他两个类似。如果你没有得到我也可以通过代码解释。这里不工作你能建议***.com/questions/42736745/… 【参考方案1】： 将radio和image包装在<label>中 隐藏单选按钮（不要使用display:none 或visibility:hidden，因为这会影响可访问性）使用Adjacent sibling selector+定位隐藏收音机旁边的图像

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

_{别忘了给你的标签添加一个class，在CSS中使用那个class。}

自定义样式和动画

这是使用<i> 元素和:after 伪元素的高级版本：

bodycolor:#444;font:100%/1.4 sans-serif;


/* CUSTOM RADIO & CHECKBOXES
   http://***.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>

【讨论】：

+1 表示伪选择器，我想我过去曾使用 javascript 来检查选中！那会教我... 可见性隐藏意味着它不可点击，绝对位置将其从文档流中取出这是一个很好的答案。我可以补充一点，type="checkbox" 也同样适用。好的，这很好.. 效果很好，显然也适用于 IE，但实际上并非如此。图像行为正确，但提交表单时，没有缩略图选择。我想我正在使用 Win 8.1 附带的新 IE。有什么想法吗？聚会迟到了，但要小心。 Visibility:hidden 将隐藏屏幕阅读器的输入，从可访问性的角度来看，这是一个很大的禁忌。【参考方案2】：

示例：

注意！此解决方案是纯 CSS 的。

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

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

我前几天刚做了一个例子。

JSFiddle How to use images for radio-buttons - Gist

【讨论】：

这太棒了！我将它集成到一个 ASP.NET 表单中，它就像一个魅力 :) 此示例在 XUbuntu 16.04.1 下的 Firefox 49.0.2 中不起作用 @SergeyKudriavtsev 也许代码需要和更新（这个答案来自 2013 年）。值得庆幸的是，该代码对任何人都是开放的，可以对其进行改进。我会尽快研究一下。干杯。在 Firefox 60、Windows 10 中运行良好。我为一组 3 个笑脸工作。现在我需要在一个表单上有多行，每行都有自己的一组笑脸。我的问题是，当一行改变时，它们都改变了。有什么想法需要修改哪些部分来完成此操作？【参考方案3】：

你可以使用 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;

jsFiddle

【讨论】：

【参考方案4】：

保持单选按钮隐藏，并在单击图像时，使用 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;

【讨论】：

【参考方案5】：

只是使用一个类只隐藏一些...基于https://***.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>

【讨论】：

【参考方案6】：

这是一个基于此处示例的简单 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设置一个按钮为选中或取消选中，你必须调用刷新函数：

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

【讨论】：

【参考方案7】：

可以使用 label 和 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

【讨论】：

【参考方案8】：

这是一个非常简单的例子

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>

演示：http://jsfiddle.net/La8wQ/2471/

这个例子基于这个技巧：https://css-tricks.com/the-checkbox-hack/

我测试过：chrome、firefox、safari

【讨论】：

【参考方案9】：

$spinTime: 3;
html, body  height: 100%; 
*  user-select: none; 
body 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Raleway', sans-serif;
    font-size: 72px;
    input 
        display: none;
        + div > span 
            display: inline-block;
            position: relative;
            white-space: nowrap;
            color: rgba(#fff, 0);
            transition: all 0.5s ease-in-out;
            span 
                display: inline-block;
                position: absolute;
                left: 50%;
                text-align: center;
                color: rgba(#000, 1);
                transform: translateX(-50%);
                transform-origin: left;
                transition: all 0.5s ease-in-out;
                &:first-of-type 
                    transform: rotateY(0deg) translateX(-50%);
                
                &:last-of-type 
                    transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg,0deg);
                
            
        
        &#fat:checked ~ div > span span 
            &:first-of-type 
                transform: rotateY(0deg) translateX(-50%);
            
            &:last-of-type 
                transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg,0deg);
            
        
        &#fit:checked ~ div > span 
            margin: 0 -10px;
            span 
                &:first-of-type 
                    transform: rotateY(90deg) translateX(-50%);
                
                &:last-of-type 
                    transform: rotateY(0deg) translateX(-50%) scaleX(1) skew(0deg,0deg);
                
            
        
        + div + div 
            width: 280px;
            margin-top: 10px;
            label 
                display: block;
                padding: 20px 10px;
                text-align: center;
                transition: all 0.15s ease-in-out;
                background: #fff;
                border-radius: 10px;
                box-sizing: border-box;
                width: 48%;
                font-size: 64px;
                cursor: pointer;
                &:first-child 
                    float: left;
                    box-shadow:
                        inset 0 0 0 4px #1597ff,
                        0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
                
                &:last-child  float: right; 
            
        
        &#fat:checked ~ div + div label 
            &:first-child 
                box-shadow:
                    inset 0 0 0 4px #1597ff,
                    0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
            
            &:last-child 
                box-shadow:
                    inset 0 0 0 0px #1597ff,
                    0 10px 15px -20px rgba(#1597ff, 0);
            
        
        &#fit:checked ~ div + div label 
            &:first-child 
                box-shadow:
                    inset 0 0 0 0px #1597ff,
                    0 10px 15px -20px rgba(#1597ff, 0);
            
            &:last-child 
                box-shadow:
                    inset 0 0 0 4px #1597ff,
                    0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
            
        
    



<input type="radio" id="fat" name="fatfit">
<input type="radio" id="fit" name="fatfit">
<div>
    GET F<span>A<span>A</span><span>I</span></span>T
</div>
<div>
    <label for="fat">?</label>
    <label for="fit">??</label>
</div>

【讨论】：

请添加一些解释，这样就清楚了。

以上是关于使用图像而不是单选按钮的主要内容，如果未能解决你的问题，请参考以下文章

为啥使用 StringVar 而不是 IntVar 时 Tkinter 的单选按钮都开始选中？

使用复选框而不是单选按钮来控制传单图层？

PHP，单选按钮返回，而不是价值

在付款方式中选择选项而不是 magento 中的单选按钮

单选带图像但隐藏单选按钮并使用图像选择

如何使单选按钮返回布尔值真/假而不是开/关