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

嗨我正在嘗試使用單選按鈕 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的中間刪除電臺圖標。所以它看起來和我用按鈕製作的第一個演示完全一樣？

來源

2017-02-13 Athul

把它放在一個''標籤，而不是''

。這實際上是該標籤的功能。 –

@EmilS.Jørgensen標籤而不是單選按鈕或Div？ – Athul

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

來源

2017-02-13 08:15:13

我想隱藏單選按鈕「圓」也有嗎？ – Athul

-3

你可以嘗試像sonething;

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

來源

2017-02-13 08:02:13 bluepinto

您需要使用標籤標記，而不是按鈕的

<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 { 
    display:none; 
}

來源

2017-02-13 08:14:08 Visrozar

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

回答

相關問題