【问题标题】：CSS Html make a image appear over options of a radio button ( radio button is hidden by CSS)CSS Html 使图像出现在单选按钮的选项上（单选按钮被 CSS 隐藏）
【发布时间】：2016-08-24 09:16:19
【问题描述】：

我正在尝试使图像出现在单选按钮的选项上（单选按钮被 CSS 隐藏） PLs 检查以下 js fiddle

[链接] (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 有关。请帮助。需要稍作修改。

谢谢

【问题讨论】：

我在您提供的代码中没有看到任何图像？您能否为我们提供一个您正在努力实现的目标的示例？
请转到 ipsy dot com 并查看测验。不，我的代码中还没有图像。我可以稍后添加图像。
到目前为止您尝试过什么？仅提供 css 和 html 并不能向我们展示您是如何处理该主题的。帮助只提供给那些已经尝试但失败的人......

标签： javascript jquery html css

【解决方案1】：

尝试类似的方法，但不要使用边框、框阴影和背景颜色，而是使用背景图像。

.container {
  margin: 32px auto;
}
input {
  display: none;
}
label {
  display: block;
}
input + label:before {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  content: '';
  width: 1em;
  height: 1em;
  box-shadow: 0 0 0 1px black;
  margin-right: 0.25em;
  top: .2em;
}

input:checked + label:before {
  border: 2px solid white;
  background: lime;;
}

input[type=radio] + label:before {
  border-radius: 50%;
}

<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>

【讨论】：

【解决方案2】：

<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 用于tick，而不是图像

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

【讨论】：

【解决方案3】：

参考这些链接：Link1

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

<!--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>

【讨论】：