Question

我正在尝试用一些图像替换传统的单选按钮。因此，当有人点击该选项时，该图像应显示在复选框上。我的问题是，当我点击复选框时，没有选择该选项。但是，由于我为标签指定了for属性，因此当我点击标签时会选择选项。

更新

这是我的部分工作jsFiddle

Answer 1

我希望它能帮到你DEMO

<input type="checkbox">

<br><br>

<span style="position:relative">
  <input type="radio" >
<span>

<强> CSS

/* checkbox */

input[type='checkbox'] {
  height: 25px;
  width: 25px;
  margin-top: 0;
  margin-right: -25px;
  margin-bottom: -25px;
  margin-left: 0;
}
input[type='checkbox']:before { 
  width: 25px;
  height: 25px;
  background: white;
  border: 2px solid #333434;
  content: '';
  position: absolute;
}
input[type='checkbox']:after { 
  position: absolute;
  content: '';
  width: 17px;
  height: 6px;
  top: 15px;
  left: 12px;
  opacity: 0;
  background: transparent;
  border: 1px solid black;
  border-width: 3px;
  border-top: none;
  border-right: none;
  border-radius: 1px;
  -webkit-transform: rotate(-50deg);
}
input[type='checkbox']:checked:after {           opacity: 1;
}

/*radio button*/
input[type='radio'] {
  height: 25px;
  width: 25px;
  margin-top: 0;
  margin-right: -25px;
  margin-bottom: -25px;
  margin-left: 0;
}


input[type='radio']:before { 
  width: 25px;
  height: 25px;
  background: white;
  border: 1px solid #333434;
  border-radius: 100%;
  content: '';
  position: absolute;
}
input[type='radio']:after { 
  opacity: 0;
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  background: black;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 100%;
  box-shadow: 0 1px rgba(255,255,255,0.1);
  -webkit-transform: none;
  top: -2px;
  left: 7px;
}
input[type='radio']:checked:after {               opacity: 1;
}

Answer 2

我想你会从这篇文章中获得帮助。

http://www.hongkiat.com/blog/css3-checkbox-radio/

Answer 3

我正在回答我自己的问题

这是jsfiddle

<ul class="pt-answers" style=" margin-bottom: 10px; margin-left:20px;">
        <li style="list-style: none;">
             <label for="q_2_1">
        <input type="radio" id="q_2_1" name="q_2" value="1">
            <img />
        Answer number one </label>

    </li>
        <li style="list-style: none;">
                <label for="q_2_2">
        <input type="radio" id="q_2_2" name="q_2" value="2">
            <img />
     Answer number two</label>

    </li>
        <li style="list-style: none;">
            <label for="q_2_3">
        <input type="radio" id="q_2_3" name="q_2" value="3">
        <img />
        Answer number three</label>

    </li>
        <li style="list-style: none;">
            <label for="q_2_4">
        <input type="radio" id="q_2_4" name="q_2" value="4">
              <img for="q_2_4"/>Answer number four
        </label>
    </li>
    </ul>

使图像可单击单选按钮

3 个答案: