Html 使用图像代替单选按钮

Question

提问by Vignesh Pichamani

If I have a radio group with buttons:

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

图 1

... how can I show only images in the select option instead of the buttons, e.g.

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

enter image description here

在此处输入图片说明

Answer 1

回答by Roko C. Buljan

Wrap radioand imagein <label>
Hide radiobutton (Don't use display:noneor visibility:hiddensince such will impact accessibility)
Target the image next to the hidden radio using Adjacent sibling selector+

将收音机和图像包裹在<label>
隐藏单选按钮（不要使用，display:none否则visibility:hidden会影响可访问性）
使用相邻同级选择器定位隐藏无线电旁边的图像+

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

_{Don't forget to add a classto your labels and in CSS use that classinstead.}

_{不要忘记向标签添加一个类，并在 CSS 中使用该类。}

Custom styles and animations

自定义样式和动画

Here's an advanced version using the <i>element and the :afterpseudo:

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

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>

Answer 2

回答by Richard Cotrina

Example:

例子：

Heads up! This solution is CSS-only.

当心！此解决方案仅适用于 CSS。

Credit-card selector, the MasterCard on the modded demo is hovered.

I recommend you take advantage of CSS3 to do that, by hidding the by-defaultinput radio button with CSS3 rules:

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

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

I just make an example a few days ago.

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

Answer 3

回答by Fracsi

You can use CSS for that.

您可以为此使用 CSS。

HTML (only for demo, it is customizable)

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

js小提琴

Answer 4

回答by Moazzam Khan

Keep radio buttons hidden, and on clicking of images, select them using JavaScript and style your image so that it look like selected. Here is the markup -

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

and JS

和JS

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

CSS

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

Answer 5

回答by CrandellWS

Just using a class to only hide some...based on https://stackoverflow.com/a/17541916/1815624

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

Answer 6

回答by atmelino

Here is a simple jQuery UI solution based on the example here:

这是一个基于示例的简单 jQuery UI 解决方案：

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

Modified code:

修改后的代码：

<!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 takes care of the image background so you know which button is checked.

jQueryUI 负责处理图像背景，以便您知道选中了哪个按钮。

Beware: If you want to set a button to checked or unchecked via Javascript, you must call the refresh function:

注意：如果您想通过 Javascript 将按钮设置为选中或取消选中，则必须调用刷新函数：

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

Answer 7

回答by Kamil Kie?czewski

Here is very simple example

这是一个非常简单的例子

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>

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

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

This example based on this trick: https://css-tricks.com/the-checkbox-hack/

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

I tested it on: chrome, firefox, safari

我测试过：chrome、firefox、safari

Answer 8

回答by Beginner

Images can be placed in place of radio buttons by using label and span elements.

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

Radio button should be hidden,

单选按钮应该隐藏，

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

Image can be given in the span tag,

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

To change the image on click of radio button, add checked state to the input tag,

要在单击单选按钮时更改图像，请将选中状态添加到输入标签，

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

If you have any queries, Refer to the following link, As I have taken solution from the below blog, http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

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

Html 使用图像代替单选按钮

提问by Vignesh Pichamani

回答by Roko C. Buljan

Custom styles and animations

自定义样式和动画

回答by Richard Cotrina

Example:

例子：

回答by Fracsi

回答by Moazzam Khan

回答by CrandellWS

回答by atmelino

回答by Kamil Kie?czewski

回答by Beginner

相关推荐

最近更新

标签

Html 使用图像代替单选按钮

提问by Vignesh Pichamani

回答by Roko C. Buljan

Custom styles and animations

自定义样式和动画

回答by Richard Cotrina

Example:

例子：

回答by Fracsi

回答by Moazzam Khan

回答by CrandellWS

回答by atmelino

回答by Kamil Kie?czewski

回答by Beginner

相关推荐

Html 如何发送隐藏数据

Html 有没有办法设置默认的 HTML5 视频音量？

Html replaceState() 与 pushState()

Html 如何不在特定标签上应用 CSS

相关推荐

最近更新

标签