我有一个表单,在那里,我想使用图像而不是单选按钮。我如何显示多个图像,而不是单选按钮。例如,性别与“男性”
.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">
© Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>
但在这里,问题出现了,当我将输入id更改为其他名称时,它不起作用。有人能帮我吗,因为这是一个非常简单的方法,我想用这个。您可以将输入id更改为“visa1”,然后查看结果。
.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">
© Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>
试试这个http://www.csscheckbox.com/css-checkbox-generator.php它是一个免费的在线工具,用于生成跨浏览器兼容的自定义复选框/单选按钮,您可能必须上传选中和取消选中状态的图像
如果“输入”的“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">
© Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>
问题内容: 我想代替标准单选按钮,对每个单选按钮使用不同的图像。对于选定状态,我希望在图像周围出现边框。 我尝试为单选按钮制作图像标签,然后隐藏该按钮,但是由于某种原因,这似乎破坏了功能。 有没有更简单/更好的方法? 问题答案: jQuery 演示源中的完整代码;
我一直在研究如何使用HTML5
问题内容: 当我单击他的图像时,我想选择单选按钮,但是它不起作用。这是我尝试过的: 我的两个属性都具有相同的 data =“” 属性:对于图像和输入,单击图像时,是否有任何方法可以检查输入(该收音机)? 谢谢 更新: 我发现一些代码有效,但是仅在图像上单击了三下,因此当单击最后一个脚本时,脚本停止了,无法再次选择第一个或第二个,我不知道为什么…我认为必须取消选中所有单选按钮,然后选中选中的一个按钮
此表单在基于函数的视图中显示单选按钮,但在我引入基于类的视图时更改为复选框,有什么解决办法。我希望他们再次显示单选按钮 表单.py models.py 模板 views.py
我正在尝试使用selenium和Python单击这个单选按钮。 我有 但它不允许我点击它。我如何使用名称、值或类、值等的组合来点击? 关于如何使用硒,是否有一个很好的信息来源?因为我所发现的大部分是在java上使用的,而我使用的是Python。 编辑:使用XPATH
问题内容: 我想将图像列表读入Python / Matplotlib,然后在图形中绘制此图像而不是其他标记(如点)。我曾尝试使用imshow,但未成功,因为我无法将图像移到另一个位置并适当缩放。也许有人有一个好主意:) 问题答案: 有两种方法可以做到这一点。 根据希望的位置,使用带有kwarg集的图像进行绘制。 在里面使用。 第一种方法最容易理解,但是第二种方法具有很大的优势。k注解框方法将使图像