登录
当前位置： 首页 > 知识库问答 >
问题：

如何使用图像而不是单选按钮

帅锦
2023-03-14

我有一个表单，在那里，我想使用图像而不是单选按钮。我如何显示多个图像，而不是单选按钮。例如，性别与“男性”

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

.cc-selector-2 input{
    position:absolute;
    z-index:999;
}

.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}
* { font-family:monospace; }
.cc-selector-2 input{ margin: 5px 0 0 12px; }
.cc-selector-2 label{ margin-left: 7px; }
span.cc{ color:#6d84b4 }
<form>
    <p>Previously:</p>
    <div>
        <input checked="checked"  id="a1" type="radio" name="a" value="visa" />
        <label for="a1">Visa</label><br/>
        <input id="a2" type="radio" name="a" value="mastercard" />
        <label for="a2">Mastercard</label>
    </div>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
        <label class="drinkcard-cc visa" for="visa"></label>
        <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
        <label class="drinkcard-cc mastercard"for="mastercard"></label>
    </div>
    
    
</form>
<small><a href="https://github.com/rcotrina94/icons">
    &copy; Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>

但在这里，问题出现了，当我将输入id更改为其他名称时，它不起作用。有人能帮我吗，因为这是一个非常简单的方法，我想用这个。您可以将输入id更改为“visa1”，然后查看结果。

共有3个答案

葛志国
2023-03-14 
.cc-selector input{
        margin:0;padding:0;
        -webkit-appearance:none;
           -moz-appearance:none;
                appearance:none;
    }

    .cc-selector-2 input{
        position:absolute;
        z-index:999;
    }

    .visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
    .mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

    .cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
    .cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
        -webkit-filter: none;
           -moz-filter: none;
                filter: none;
    }
    .drinkcard-cc{
        cursor:pointer;
        background-size:contain;
        background-repeat:no-repeat;
        display:inline-block;
        width:100px;height:70px;
        -webkit-transition: all 100ms ease-in;
           -moz-transition: all 100ms ease-in;
                transition: all 100ms ease-in;
        -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
           -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
                filter: brightness(1.8) grayscale(1) opacity(.7);
    }
    .drinkcard-cc:hover{
        -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
           -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
                filter: brightness(1.2) grayscale(.5) opacity(.9);
    }

    /* Extras */
    a:visited{color:#888}
    a{color:#444;text-decoration:none;}
    p{margin-bottom:.3em;}
    * { font-family:monospace; }
    .cc-selector-2 input{ margin: 5px 0 0 12px; }
    .cc-selector-2 label{ margin-left: 7px; }
    span.cc{ color:#6d84b4 }
	
	form input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
<form>
        <p>Previously:</p>
        <div>
            <input checked="checked"  id="a1" type="radio" name="a" value="visa" />
            <label for="a1">Visa</label><br/>
            <input id="a2" type="radio" name="a" value="mastercard" />
            <label for="a2">Mastercard</label>
        </div>
        <p>Now, with CSS3: </p>
        <div class="cc-selector">
            <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
            <label class="drinkcard-cc visa" for="visa"></label>
            <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
            <label class="drinkcard-cc mastercard"for="mastercard"></label>
        </div>
        
        
    </form>
    <small><a href="https://github.com/rcotrina94/icons">
        &copy; Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>
刘琨
2023-03-14

试试这个http://www.csscheckbox.com/css-checkbox-generator.php它是一个免费的在线工具，用于生成跨浏览器兼容的自定义复选框/单选按钮，您可能必须上传选中和取消选中状态的图像

梁福
2023-03-14

如果“输入”的“id”也改变了，那么“输入”的“id”也改变了。

例如：

如果将输入id更改为“visa1”，则意味着更改=“visa1”的相关标签

<input checked="checked" id="visa1" type="radio" name="credit-card" value="visa" />
<label class="drinkcard-cc visa" for="visa1"></label>

运行以下代码段：

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

.cc-selector-2 input{
    position:absolute;
    z-index:999;
}

.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}
* { font-family:monospace; }
.cc-selector-2 input{ margin: 5px 0 0 12px; }
.cc-selector-2 label{ margin-left: 7px; }
span.cc{ color:#6d84b4 }
html prettyprint-override"><form>
    <p>Previously:</p>
    <div>
        <input checked="checked"  id="a1" type="radio" name="a" value="visa" />
        <label for="a1">Visa</label><br/>
        <input id="a2" type="radio" name="a" value="mastercard" />
        <label for="a2">Mastercard</label>
    </div>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input checked="checked" id="visa1" type="radio" name="credit-card" value="visa" />
        <label class="drinkcard-cc visa" for="visa1"></label>
        <input id="mastercard1" type="radio" name="credit-card" value="mastercard" />
        <label class="drinkcard-cc mastercard"for="mastercard1"></label>
    </div>
    
    
</form>
<small><a href="https://github.com/rcotrina94/icons">
    &copy; Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>
 类似资料：
  • 如何用图像替换单选按钮？

    问题内容： 我想代替标准单选按钮，对每个单选按钮使用不同的图像。对于选定状态，我希望在图像周围出现边框。 我尝试为单选按钮制作图像标签，然后隐藏该按钮，但是由于某种原因，这似乎破坏了功能。 有没有更简单/更好的方法？ 问题答案： jQuery 演示源中的完整代码；

  • HTML5显示为图像而不是"选择文件"按钮

    我一直在研究如何使用HTML5

  • 单击图像时选择单选按钮

    问题内容： 当我单击他的图像时，我想选择单选按钮，但是它不起作用。这是我尝试过的： 我的两个属性都具有相同的 data =“” 属性：对于图像和输入，单击图像时，是否有任何方法可以检查输入（该收音机）？ 谢谢 更新： 我发现一些代码有效，但是仅在图像上单击了三下，因此当单击最后一个脚本时，脚本停止了，无法再次选择第一个或第二个，我不知道为什么…我认为必须取消选中所有单选按钮，然后选中选中的一个按钮

  • 单选按钮不显示，而是显示复选框

    此表单在基于函数的视图中显示单选按钮，但在我引入基于类的视图时更改为复选框，有什么解决办法。我希望他们再次显示单选按钮 表单.py models.py 模板 views.py

  • 如何使用selenium选择单选按钮

    我正在尝试使用selenium和Python单击这个单选按钮。 我有 但它不允许我点击它。我如何使用名称、值或类、值等的组合来点击？ 关于如何使用硒，是否有一个很好的信息来源？因为我所发现的大部分是在java上使用的,而我使用的是Python。 编辑：使用XPATH

  • Matplotlib：如何绘制图像而不是点？

    问题内容： 我想将图像列表读入Python / Matplotlib，然后在图形中绘制此图像而不是其他标记（如点）。我曾尝试使用imshow，但未成功，因为我无法将图像移到另一个位置并适当缩放。也许有人有一个好主意：） 问题答案： 有两种方法可以做到这一点。 根据希望的位置，使用带有kwarg集的图像进行绘制。 在里面使用。 第一种方法最容易理解，但是第二种方法具有很大的优势。k注解框方法将使图像

相关问答

如何使用Selenium WebDriver选择单选按钮？如何使用SWTBot查找图像按钮如何在ReactJS中使用单选按钮？如何使用Materialize和WTForms的单选按钮？如何使用uri而不使用mediastore.images.media.data获取图像真实路径

相关文章

如何使用jQuery检查单选按钮？如何在ReactJS中使用单选按钮？如何使用CSS更改输入按钮图像？如何取消选中单选按钮？如何使Jersey使用SLF4J而不是JUL？

相关阅读

Tkinter单选框和多选框按钮Struts2 <s:radio>单选按钮例子Pillow图像几何变换HTML 图像2.3.4 ImageView(图像视图)

相关工具

简单图床多层次图像分割简单易用的Google地图导航涂抹图像形成马赛克简单的地图路径

相关文档

像 IDE 样使用 VIM如何使用 Gitbook 来做笔记小米用户画像+服务使用文档Python OpenCV 图像和视频分析用户画像
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.