Question

我的单选按钮上可以有多个背景图像吗？作为标准，我的单选按钮将具有某种形式的图像，并且在选择时，它应该在图像旁边添加复选标记。但现在，它用复选标记替换图像。

原因是我在select：

上设置了背景图片

.toolbar-chartType input[type="radio"]:checked + label  {
    background-image:url(' ../../../../Content/images/checkmark.png') !important;
    background-repeat: no-repeat;
    background-position-x: 0;
}

，它取代了之前的图像。我做了一个jsfiddle

jsfiddle

Answer 1

编辑：在看到初始问题的新评论后，您可能希望跳到第二个代码块，如果标签上的图像不同，则第一个解决方案将无效。 < / p>

是。 CSS3支持为一个元素提供多个背景图像。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

.toolbar-chartType input[type="radio"]:checked + label  {
    background-image: url(' http://mymasap.org/wp-content/uploads/2013/05/checkmark1.png'), url('http://www.nextgenupdate.com/forums/images/smilies/wat.png') !important;
    background-repeat: no-repeat;
    background-position-x: 0;
}

支持此功能isn't full但是，如果您需要在旧版浏览器中获得支持，则需要找到不同的解决方案。

你可以尝试在彼此的顶部放置两个独立的元素，每个元素都有自己的背景，或者你可以在两个背景的汇编中制作一个图像，然后简单地将其指定为背景图像。

同样，对于现代borwsers，您可以使用CSS ::before伪元素来实现此效果。不是为标签设置样式，而是设置其::before样式。（http://jsfiddle.net/mVNLV/1/）

.toolbar-chartType input[type="radio"]:checked + label::before  {
    content:"";
    width:20px;
    height:15px;
    background-image:url(' http://mymasap.org/wp-content/uploads/2013/05/checkmark1.png') !important;
    background-repeat: no-repeat;
    position:absolute;
    margin-left:-58px;
}

再次，support varies。

对于受支持最广泛的解决方案，您需要添加其他元素，但这两种解决方案都适用于较新的浏览器。

选择单选按钮多个背景图像

1 个答案: