感谢

Question

我试图让图像显示在单选按钮的选项上（单选按钮被CSS隐藏） PL检查以下js小提琴

[链接]（https://jsfiddle.net/testingmilan56/rqr4dt8h/）

ul {
    list-style: none;
}
li {
    display: inline-block;
    margin-right: 15px;
}
input {
    visibility:hidden;
}
label {
    cursor: pointer;
}
input:checked + label {
    background:#fff000;
}

<ul>
    <li>
        <input type='radio' value='1' name='radio' id='radio1'/>
        <label for='radio1'>Value 1</label>
    </li>
    <li>
        <input type='checkbox' value='2' name='radio'  id='radio2'/>
        <label for='radio2'>Value 2</label>
    </li>
    <li>
        <input type='radio' value='3' name='radio'  id='radio3'/>
        <label for='radio3'>Value 3</label>
    </li>
</ul>

我也想控制图像的位置。我知道它可以用z-index ..请帮助。需要稍作修改。

感谢

Answer 1

尝试这样的事情，但不要使用边框，框阴影和背景颜色，而是使用背景图像。

<div class="container">
  <input type="checkbox" id="check-1" name="check-1" />
  <label for="check-1">Label 1</label>
  <input type="checkbox" id="check-2" name="check-2" />
  <label for="check-2">Label 2</label>
  <input type="checkbox" id="check-3" name="check-3" />
  <label for="check-3">Label 3</label>
  <input type="checkbox" id="check-4" name="check-4" />
  <label for="check-4">Label 4</label>
  <input type="checkbox" id="check-5" name="check-5" />
  <label for="check-5">Label 5</label>

  <hr />

  <input type="radio" id="radio-1" name="radio" />
  <label for="radio-1">label 1</label>
  <input type="radio" id="radio-2" name="radio" />
  <label for="radio-2">label 2</label>
  <input type="radio" id="radio-3" name="radio" />
  <label for="radio-3">label 3</label>
  <input type="radio" id="radio-4" name="radio" />
  <label for="radio-4">label 4</label>
  <input type="radio" id="radio-5" name="radio" />
  <label for="radio-5">label 5</label>
</div>

class Person {
    static coreStats = {
        role: "slacker",
        weapon: null,
        speed: 4,
        vechicle: "roller blades",
    };
}

class Ninja extends Person {
    static coreStats = {
        role: "silent assassin",
        weapon: "katana",
        speed: 99,
    };
}

console.log(Ninja.coreStats); // But vechicle is no more

Answer 2

IdHTTPWebBrokerBridge.pas

您可以<ul> <li> <input type='radio' value='1' name='radio' id='radio1'/> <label for='radio1'>Value 1</label> </li> <li> <input type='checkbox' value='2' name='radio' id='radio2'/> <label for='radio2'>Value 2</label> </li> <li> <input type='radio' value='3' name='radio' id='radio3'/> <label for='radio3'>Value 3</label> </li> </ul> ul { list-style: none; padding: 0; overflow: hidden; } li { float: left; width: 100px; position: relative; height: 100px; } input { visibility:hidden; } label { cursor: pointer; } input + label{ position: absolute; bottom: 0; } input + label:before { background: #fff000; position: absolute; border-radius: 50%; width: 70px; height: 70px; line-height: 70px; bottom: 25px; left: 50%; display: block; content: ''; text-align: center; margin-left: -35px; } input:checked + label:before { content: 'TICK'; }使用FontAwesome代替图片

https://jsfiddle.net/rqr4dt8h/1/

Answer 3

请参阅这些链接：Link1

＆＃13;

    .radio_item {
      display: none !important;
    }
    .label_item {
      opacity: 0.1;
    }
    .radio_item:checked + label {
      opacity: 1;
    }
    label {
      cursor: pointer;
    }

＆＃13;

<!--RADIO 1-->
<input type="radio" class="radio_item" value="" name="item" id="radio1">
<label class="label_item" for="radio1">
  <img src="http://i.stack.imgur.com/FSN1q.png">
</label>

<!--RADIO 2-->
<input type="radio" class="radio_item" value="" name="item" id="radio2">
<label class="label_item" for="radio2">
  <img src="http://i.stack.imgur.com/FSN1q.png">
</label>

＆＃13;

CSS Html使图像显示在单选按钮的选项上（单选按钮被CSS隐藏）

感谢

3 个答案: