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。我担心引导代码可能会干扰我自己的代码。

谢谢！

Answer 1

删除所有<br />。

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

Answer 2

选择器中的ALTER TABLE tableName MODIFY COLUMN TIME VARCHAR(8);查找即时+标记。由于介于label之间，因此未选择标签。

使用<br>代替~，+可以选择label之前的任何input。

检查小提琴 - https://jsfiddle.net/afelixj/hL0fj82m/

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

2 个答案: