Question

我试图通过background-color属性使用图像设置一些单选按钮的样式。使用bootstrap，代码序列看起来像这样：

<div id="something">
    <div class="radio">
        <label>
            <input id="some_id" value="Yes" type="radio">
            Yes
        </label>
    </div>

    <div class="radio">
        <label>
            <input id="some_id2" checked="" value="No" type="radio">
            No
        </label>
    </div>
</div>

我想要做的是编辑已检查，未选中，重点突出，检查关注和禁用状态的图标。我不希望文本有背景，只有前面的图标。

css：

.radio label {
    line-height: 40px;
    min-height: 40px;
}
.radio label{
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1024px-Google_%22G%22_Logo.svg.png");
  background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: 40px;
}
.radio label:checked{
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/170px-Apple_logo_black.svg.png");
  }

小提琴：https://jsfiddle.net/qL2wab24/

Answer 1

您可以使用CSS3单选按钮样式

＆＃13;

radio{
    position: reletive;
    overflow: hidden;}
.radio label {
    line-height: 40px;
    min-height: 40px;
}
.radio label{
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1024px-Google_%22G%22_Logo.svg.png");
  background-size: 40px 40px;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    display: block;
    padding: 0 0 0 50px;
}
.radio input[type="radio"]:checked~label{
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/170px-Apple_logo_black.svg.png");
  }
.radio label:focus{
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/170px-Apple_logo_black.svg.png");
  }
.radio input[type="radio"]:checked~label:focus{
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1024px-Google_%22G%22_Logo.svg.png");
  }
  
.radio input[type="radio"]{position: absolute;top: 0; left: 0; z-index: -1; opacity: 0; visibility: hidden;}

＆＃13;

<div id="something">
    <div class="radio">
            <input id="some_id" value="Yes" type="radio" name="name">
        <label for="some_id">
            Yes
        </label>
    </div>

    <div class="radio">
            <input id="some_id2" checked="" value="No" type="radio" name="name">
        <label for="some_id2">
            No
        </label>
    </div>
</div>

＆＃13;

Answer 2

只需添加一个css：

input[type=radio]
{
    opacity: 0;
}

我已经更新了你的js小提琴请检查：

https://jsfiddle.net/qL2wab24/4/

样式bootsrap单选按钮通过图像

2 个答案: