是否可以将图像放入输入类型 =“复选框”？
Posted
技术标签:
【中文标题】是否可以将图像放入输入类型 =“复选框”？【英文标题】：is it possible put image in input type="check box"? 【发布时间】：2011-06-14 23:40:41 【问题描述】：我想在我的 html 代码中的复选框和单选框的背景上放置一个图像，但它不起作用，但它适用于其他表单属性。
【问题讨论】：
我认为这是不可能的，你可以尝试一些 javascript+css 的工作。示例：queness.com/post/204/… 如果您至少提供一些与您遇到问题的地方相关的代码，那么帮助您会容易得多。 您可以尝试使用input[type=checkbox]:after 和input[type=checkbox]:checked:after 构建一些东西，但这可能是CSS3，我没有完整的样板，抱歉。
【参考方案1】：
我找到了如何使用纯 css 将图像赋予 checkbox 和 radio 按钮的方法。
HTML
<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>
CSS
input[type=checkbox]
display:none;
input[type=checkbox] + label
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
input[type=checkbox]:checked + label
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
查看更多http://css-tricks.com/the-checkbox-hack/，
https://gist.github.com/592332
【讨论】：
【参考方案2】：我编写了自己的代码来解决这个问题。这将像这样工作。我现在没有这个代码，但我在 SO 上用同样的方式写。
<div class="checkbox-wrapper">
<input type="checkbox" name="value"/>
<img src="img/blah.png"/>
</div>
在 css 中，我们将隐藏此复选框，使其 Z-index 小于我放入此包装器代码中的图像。 Eventwise，当有人点击图像时，它看起来像复选框，实际上复选框将被点击。而不是display:none 使用opacity:0 会更好。这将在 IE6 中中断，但我们并不关心这一点，因为我不再支持 IE6。
在 Javascript 中，如果您想要不同的（但与我的类似）实现，您可以编写事件。您可以用自己的基于主题的控件替换原生 Html Checkbox、Radio 和 select（如果您坚持使用 Twitter 引导程序，select2 会更好）。
【讨论】：
【参考方案3】：我做了一个“使用像复选框和无线电纯Css这样的图像”的例子
Link to Stackblitz
*
font-family: Lato;
margin: 0;
padding: 0;
--transition: 0.15s;
--border-radius: 0.5rem;
--background: #ffc107;
--box-shadow: #ffc107;
.cont-bg
min-height: 100vh;
background-image: radial-gradient(
circle farthest-corner at 7.2% 13.6%,
rgba(37, 249, 245, 1) 0%,
rgba(8, 70, 218, 1) 90%
);
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.cont-title
color: white;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
.cont-main
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
.cont-checkbox
width: 150px;
height: 100px;
border-radius: var(--border-radius);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
background: white;
transition: transform var(--transition);
.cont-checkbox:first-of-type
margin-bottom: 0.75rem;
margin-right: 0.75rem;
.cont-checkbox:active
transform: scale(0.9);
input
display: none;
input:checked + label
opacity: 1;
box-shadow: 0 0 0 3px var(--background);
input:checked + label img
-webkit-filter: none; /* Safari 6.0 - 9.0 */
filter: none;
input:checked + label .cover-checkbox
opacity: 1;
transform: scale(1);
input:checked + label .cover-checkbox svg
stroke-dashoffset: 0;
label
display: inline-block;
cursor: pointer;
border-radius: var(--border-radius);
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
opacity: 0.6;
label img
width: 100%;
height: 70%;
object-fit: cover;
clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
label .cover-checkbox
position: absolute;
right: 5px;
top: 3px;
z-index: 1;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--box-shadow);
border: 2px solid #fff;
transition: transform var(--transition),
opacity calc(var(--transition) * 1.2) linear;
opacity: 0;
transform: scale(0);
label .cover-checkbox svg
width: 13px;
height: 11px;
display: inline-block;
vertical-align: top;
fill: none;
margin: 5px 0 0 3px;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
transition: stroke-dashoffset 0.4s ease var(--transition);
stroke-dashoffset: 16px;
label .info
text-align: center;
margin-top: 0.2rem;
font-weight: 600;
font-size: 0.8rem;
<div class="cont-bg">
<div class="cont-title">Checkbox</div>
<div class="cont-main">
<div class="cont-checkbox">
<input type="checkbox" id="myCheckbox-1" />
<label for="myCheckbox-1">
<img
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*"
/>
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">Mazda MX-5 Miata</div>
</label>
</div>
<div class="cont-checkbox">
<input type="checkbox" id="myCheckbox-2" />
<label for="myCheckbox-2">
<img
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*"
/>
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">Toyota Supra</div>
</label>
</div>
</div>
<div class="cont-title">Radio</div>
<div class="cont-main">
<div class="cont-checkbox">
<input type="radio" name="myRadio" id="myRadio-1" />
<label for="myRadio-1">
<img
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*"
/>
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">Mazda MX-5 Miata</div>
</label>
</div>
<div class="cont-checkbox">
<input type="radio" name="myRadio" id="myRadio-2" />
<label for="myRadio-2">
<img
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*"
/>
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">Toyota Supra</div>
</label>
</div>
</div>
</div>【讨论】：
【参考方案4】：将复选框放在一个 div 中，并在该 div 中放置一个背景图像。这是一个例子：
<div id="backgrounddiv" style="background-image: url('image.gif');">
<input id="check_box" type="checkbox" />
</div>
【讨论】：
我没有尝试过，但从外观上我可以看出这对我们的目的不起作用 :) ，sandeep 自己的解决方案是最好的 :) （还）以上是关于是否可以将图像放入输入类型 =“复选框”？的主要内容，如果未能解决你的问题，请参考以下文章
使用 PHP 将 JSON 数据放入 html 表单输入复选框