作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要有关仅使用 CSS 的复选框的帮助。
首先它能正常工作。但是,我想在单击按钮时将选中的图像覆盖在未选中的图像之上。如何实现?
.gchoice_1_1_3 {border: 1px solid red;}
.gchoice_1_1_3 input[type="checkbox"] {display: none; }
.gchoice_1_1_3 input[type="checkbox"] + label:before {
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
z-index: 10;
content: "";
display: inline-block;
font-size: 12px;
height: 75px;
width: 75px;
line-height: 16px;
margin: -2px 6px 0 0;
text-align: center;
vertical-align: middle;
positionL relative;
border-radius: 10px;
background-color: #6283B2;
}
.gchoice_1_1_3 input[type="checkbox"]:checked + label:before {
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/checkmark.png') 0 0px no-repeat;
height: 75px;
width: 75px;
border-radius: 10px;
background-color: #37924A;
}
<li class='gchoice_1_1_3'>
<input name='input_1.3' type='checkbox' value='Christmas Lights' id='choice_1_1_3' tabindex='22' />
<label for='choice_1_1_3' id='label_1_1_3'>Christmas Lights</label>
</li>
最佳答案
您可以使用多个背景。
但一定要检查浏览器支持和应用背景的顺序问题。
.gchoice_1_1_3 {border: 1px solid red;}
.gchoice_1_1_3 input[type="checkbox"] {display: none; }
.gchoice_1_1_3 input[type="checkbox"] + label:before {
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
z-index: 10;
content: "";
display: inline-block;
font-size: 12px;
height: 75px;
width: 75px;
line-height: 16px;
margin: -2px 6px 0 0;
text-align: center;
vertical-align: middle;
position: relative;
border-radius: 10px;
background-color: #6283B2;
}
.gchoice_1_1_3 input[type="checkbox"]:checked + label:before {
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/checkmark.png'), url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
height: 75px;
width: 75px;
border-radius: 10px;
background-color: #37924A;
}
<li class='gchoice_1_1_3'>
<input name='input_1.3' type='checkbox' value='Christmas Lights' id='choice_1_1_3' tabindex='22' />
<label for='choice_1_1_3' id='label_1_1_3'>Christmas Lights</label>
</li>
关于css - 复选框图像叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34730553/
我正在寻找用于(漂亮的)电路/方框图绘图的算法或可视化工具。 我也对问题的一般表述感兴趣。 “电路图”是指探索具有 I/O 端口及其连接(电线)的框图(矩形)的布局和布线的能力。这些框图可以是分层的,
我有很多 C 代码,需要将其转换为 Simulink 框图。我不想使用 S-Functions,因为我希望 Simulink 框图仅使用基本 Simulink 模块,用户无需了解 C 代码即可更改这些
我是一名优秀的程序员,十分优秀!