使單選按鈕的整個背景可點擊

Question

嗨，我正在嘗試使用單選按鈕http://codepen.io/Athulks/pen/EZGpjZ創建相同的東西。

到目前為止，我已經達到了這么多

 .display_radio input[type="radio"] { background-color: #fed55c; border: 2px solid #fffdf6; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; margin: 36px 0 0 13px; -webkit-appearance: none; -moz-appearance: none; border-radius: 50px; display: inline-block; position: relative; float: left; } .money-radio-container span { margin: 35px 2px 0px 7px; font-size: 20px; font-weight: bold; float: left; color: #fff; } .display_radio { display: inline-block; line-height: 20px; margin-bottom: 10px; border: 1px solid #fed55c; width: 100px; height: 100px; border-radius: 100px; position: relative; text-align: center; vertical-align: middle; background-color: #fed55c; } 

 <div class="col-md-12 money-radio-container"> <div class="display_radio"> <input type="radio" name="optradio" class="money-radio" value="10"><span>$ 10 </span> </div> <div class="display_radio"> <input type="radio" name="optradio" class="money-radio" value="20"><span>$ 20 </span> </div> <div class="display_radio"> <input type="radio" name="optradio" class="money-radio" value="50"><span>$ 50 </span> </div> <div class="display_radio"> <input type="radio" name="optradio" class="money-radio" value="100"><span>$ 100 </span> </div> <div class="display_radio"> <input type="radio" name="optradio" class="money-radio" value="150"><span>$ 150 </span> </div> </div> 

如何使整個div可點擊，並從div的中間刪除該單選圖標。 這樣看起來就和我使用按鈕制作的第一個演示完全一樣嗎？

Answer 1

 .display_radio input[type="radio"] { background-color: #fed55c; border: 2px solid #fffdf6; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; margin: 36px 0 0 13px; -webkit-appearance: none; -moz-appearance: none; border-radius: 50px; display: inline-block; position: relative; float: left; } .money-radio-container span { margin: 35px 2px 0px 7px; font-size: 20px; font-weight: bold; float: left; color: #fff; } .display_radio { display: inline-block; line-height: 20px; margin-bottom: 10px; border: 1px solid #fed55c; width: 100px; height: 100px; border-radius: 100px; position: relative; text-align: center; vertical-align: middle; background-color: #fed55c; } 

 <div class="col-md-12 money-radio-container"> <label class="display_radio"> <input type="radio" name="optradio" class="money-radio" value="10"><span>$ 10 </span> </label> <label class="display_radio"> <input type="radio" name="optradio" class="money-radio" value="20"><span>$ 20 </span> </label > <label class="display_radio"> <input type="radio" name="optradio" class="money-radio" value="50"><span>$ 50 </span> </label > <label class="display_radio"> <input type="radio" name="optradio" class="money-radio" value="100"><span>$ 100 </span> </label > <label class="display_radio"> <input type="radio" name="optradio" class="money-radio" value="150"><span>$ 150 </span> </label > </div> 

Answer 2

您需要使用標簽標簽而不是按鈕

<div class="display_radio">
    <input type="radio" id="radio1" name="optradio" class="money-radio" value="10">
    <label for="radio1" class="btn btn-radiotype btn-circle" >$5</label>
</div>

那么您可以設置“ money-radio”類，並顯示：none，這樣單選按鈕將不會顯示，但仍然可以正常工作。 這些值仍將存儲在相應的單選按鈕中。

.money-radio {
  display:none;
}

Answer 3

您可以嘗試像

<a href='mypage'><div class="col-md-12 money-radio-container"></a>