CSS 自定义单选按钮我看不到我想要显示的图像

Question

我正在尝试创建自定义单选按钮。但它不起作用。我看不到要显示的图像。

 label {
   font-weight: lighter;
   cursor:pointer;
 }

 input[type="radio"] {
    display:none;
 }

 input[type="radio"] + label {
    background: url('../img/check-a.png') left 1px no-repeat;
    padding-left: 10px;
    padding-bottom: 5px;
 }

 input[type="radio"]:checked + label {
    background-image: url('../img/check-a.png');
 }

 <form onSubmit="submitValue()" id="comp" name="comp" action="https://registration.disneyinternational.com/login.htm" method="get">
    <div class = "row form-row padding-top-20">
       <div class = "col-md-3 text-center wrapper-q1">
          <p>
             <input class="question1" id = "schurk1" type="radio" name="q1" value="Parade">
             <br />
             <label class = "pointer label3" for = "schurk1">
                De Boze Stiefmoeder
             </label>
          </p>
        </div>
        <div class = "col-md-3 text-center wrapper-q1">
           <p>
              <input class="question1" id = "schurk2" type="radio" name="q1" value="Parade">
              <br />
              <label class = "pointer label3" for = "schurk2">
                  Cruella
              </label>
            </p>
         </div>
         <div class = "col-md-3 text-center wrapper-q1">
            <p>
              <input class="question1" id = "schurk3" type="radio" name="q1" value="Parade">
              <br />
              <label class = "pointer label3" for = "schurk3">
                 Maleficent
              </label>
            </p>
         </div>
         <div class = "col-md-3 text-center wrapper-q1">
            <p>
              <input class="question1" id = "schurk4" type="radio" name="q1" value="Parade">
              <br />
              <label class = "pointer label3" for = "schurk4">
                  Jafar
              </label>
            </p>
         </div>
     </div>
 </form>

希望你能帮我解决这个问题。我正在使用 bootstrap。我担心 bootstrap 代码可能会干扰我自己的代码。

谢谢！

Answer 1

删除所有 <br />。

在您的 CSS 中，您用于定位标签的规则是 + 或下一个兄弟。您输入的下一个兄弟实际上是您当前代码中的 <br />。

Answer 2

select或+中的+寻找直接的label标签。由于中间有一个<br>，标签不是select。

使用 ~ 而不是 +，它可以 select 任何 label 前面有 input。

勾选 fiddle - https://jsfiddle.net/afelixj/hL0fj82m/

CSS 自定义单选按钮我看不到我想要显示的图像

CSS Custom Radio Button I cannot see the image I want to be displayed

css

button

radio-button