Question

以下是显示属性选项的页面中的代码段。显示的代码用于通过隐藏单选按钮选择的项目，并且要求在选择时用复选标记覆盖属性图像。虽然我有选中显示的复选标记，但它始终位于原始图像的后面。我尝试过使用z-index，不透明度，以及绝对和相对定位。实现这个目标的方法是什么？我已经没想完了。我已经查看了类似问题的多个答案，但没有一个对我有效。

<div class="attribImg">
<input type="radio" name="id[11]" value="61" checked="checked" id="attrib-11-61" />
<label class="attribsRadioButton four" for="attrib-11-61"><img src="images/attributes/18mg.png" alt="" width="50" height="50" />
</label>
<br />
</div>

使用的Css是：

input[type="radio"] {
visibility:hidden;
}
label {
cursor: pointer;
}

.attribImg {z-index:0;}

input[type="radio"]:checked+label{
background:url(../images/checkmark.png) no-repeat 7px -20px;
}

小提琴是http://jsfiddle.net/1jcz1xyn/

Answer 1

问题是<img>位于<label>内部造成的。无论您在标签上使用z-index，孩子（img）都会始终位于其父级背景之上，除非您使用z-index: -1设置孩子（updated fiddle - 点击第2个）：

.attribImg {
    position: relative; /** this is the positioning context **/
    width: 50px;
    height: 50px;
}
input {
    visibility: hidden;
}

label {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

img {
    position: relative;
    z-index: -1;
}

input[type="radio"]:checked+label {    background:url(https://cdn1.iconfinder.com/data/icons/mimiGlyphs/16/check_mark.png) no-repeat center center;
}

Answer 2

我建议您尝试仅使用CSS background-image 来操作图标/图像，而不是使用 img 的一个案例和使用CSS的另一个案例。如果你这样做，z-index不会解决，因为它是一个逻辑错误。

如果您要使用图像/图标（在某些情况下对转换非常有用），最好使用相同的技术添加它们并使用css更改状态。

所以，你可以用CSS操作：

<div class="form-item">
    <label for="radio-1">
        <input type="radio" name="radios" id="radio-1"> <span>Sample 1</span>
    </label>
</div>

label > input[type="radio"]{
    display: none;
}
    input[type="radio"]:checked + span:after{
        font-family:"FontAwesome";
        content: "\f00c";
        margin-left:10px;
    }

你可以在同一个表单字段中添加两个图像，并用一些CSS（和FontAwesome）操作它们：

<div class="form-item">
    <label for="radio-switch-2">
        <input type="radio" name="radios-2" id="radio-switch-2">
        <div class="radio-switch-state">
            <span class="icon-off"></span>
            <span class="icon-on"></span>
        </div>
    </label>
</div>


    input[type="radio"]{
        display: none;
    }
    .radio-switch-state{
        background-color:#aaa;
        display: inline-block;
        color:#fff;
        transition:all .5s ease;
        width:50px;
        height:50px;
        position: relative;
        overflow:hidden;
        vertical-align:middle;
    }
        .radio-switch-state .icon-on,
        .radio-switch-state .icon-off{
            display: inline-block;
            position: absolute;
            width:100%;
            top:0;
        }
        // If you are using font
        .radio-switch-state .icon-on:after,
        .radio-switch-state .icon-off:after{
            font-family:"FontAwesome";
            width:100%;
            display: block;
            line-height:50px;
            position: absolute;
            transition:all .5s ease;
        }
            .radio-switch-state .icon-on:after{
                content: "\f00c";
                margin-left:100;
                left:100%;
            }
            .radio-switch-state .icon-off:after{
                content: "\f056";
                left:0;
            }
                .radio-switch-state:hover{
                    background-color:#FFA374;
                    cursor:pointer;
                }
                input[type="radio"]:checked + .radio-switch-state{
                    background-color:#FA8144;
                }
            input[type="radio"]:checked + .radio-switch-state .icon-on:after{
                content: "\f00c";
                margin-left:100;
                left:0;
            }
            input[type="radio"]:checked + .radio-switch-state .icon-off:after{
                content: "\f056";
                left:-100%;
            }

I made a Pen with both samples.

此外，使用图标时，请尝试使用图标字体库，如FontAwesome或Glyphicon。

编辑 - 添加了带图像的示例

Answer 3

也许这个变种可以帮到你？它没有对HTML进行任何更改。我之后用过::而这里是小提琴：https://jsfiddle.net/mvchalov/1jcz1xyn/2/

input[type="radio"]:checked+label::after{
background:url(https://cdn1.iconfinder.com/data/icons/mimiGlyphs/16/check_mark.png) no-repeat center center;
    width:50px;
    height:50px;
    position: absolute;
    content:'';
    margin:0 0 0 -50px;
}

在单选按钮选择上叠加图像

3 个答案: