如何風格輸入類型=收音機？

-7

我想用自定義背景/圖像替換默認輸入比率選擇按鈕。還可以在選擇其中一個輸入時添加自定義圖像。 enter image description here 如何風格輸入類型=收音機？

<div class="form-item"> 
    <label for="right-gender"> 
     Gender 
     <span class="form-required" title="This field is required.">*</span> 
    </label> 
    <div id="right-gender" class="form-radios"> 
     <div class="form-item form-type-radio"> 
      <input id="right-gender-1" class="form-radio" type="radio" value="male" name="submitted[right][gender]"> 
      <label class="option" for="right-gender-1">Male </label> 
     </div> 
     <div class="form-item form-type-radio"> 
      <input id="right-gender-2" class="form-radio" type="radio" value="female" name="submitted[right][gender]"> 
      <label class="option" for="right-gender-2">Female </label> 
     </div> 
    </div> 
</div>

http://jsfiddle.net/L0f8ftdn/

來源

2015-02-11 midts

http://stackoverflow.com/questions/18272497/styling-input-radio-with-css – Cracker0dks 2015-02-11 14:13:35

您可能會因爲您的問題沒有努力甚至代表您嘗試此操作而被拒絕投票。一個更好的問題將包括你自己的努力和一個關於爲什麼它可能不起作用的具體問題。 – leigero 2015-02-11 14:14:59

@leigero同意！ – NewToJS 2015-02-11 14:16:26

您需要與兩個不同的圖像的精靈。選中一項，然後取消選中一項。

然後CSS

input.form-radio{ 
display:none; 
} 
input.form-radio+label{ 
position:relative; 
cursor:pointer; 
padding-left:20px; /* need to be greater then the image width */ 
} 
input.form-radio+label:after{ 
position:absolute; 
content:" "; 
top:0; 
left: 0px; 
width: 15px;/*adjust the width of the image */ 
height: 15px; /*adjust the height of the image */ 
background:url(../images/checkbox.png); 
background-repeat:no-repeat; 
background-position:bottom left; 

} 
input.form-radio:checked+label:after{ 
background:url(../images/checkbox.png); 
background-position:top left; 
}

這是我最近的項目。希望這會有所幫助。

來源

2015-02-11 14:31:48 coderpol

-2

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

有很多教程是的。

隱藏真正的單選按鈕：

input[type=radio] { 
    display: none; 
}

添加一個 '僞標籤' 使用前：

label:before { 
    content: ""; 
    display: inline-block; 

    width: 16px; 
    height: 16px; 

    margin-right: 10px; 
    position: absolute; 
    left: 0; 
    bottombottom: 1px; 
    background-color: #aaa; 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px   rgba(255, 255, 255, .8); 
    }

您還可以將圖片添加到您的CSS。

要更改選定電臺：

input[type=radio]:checked + label:before { 
     content: "\2022"; 
     color: #f3f3f3; 
     font-size: 30px; 
     text-align: center; 
     line-height: 18px; 
    }

來源

2015-02-11 14:13:15 Sirence

請避免張貼鏈接只有答案，因爲鏈接可能在未來被打破。將解決方案的重要部分粘貼到答案中 – Huangism 2015-02-11 14:14:12

如果您閱讀您發佈的鏈接來收集相關位，您可能會發現這個鏈接無論如何都不會回答OP的問題。 – leigero 2015-02-11 14:16:46

如果你編輯這個以包含圖片定製，我會給你一個upvote（即使這個問題很糟糕）。 OP的主要問題是如何覆蓋按鈕上的圖像，這是你省略的一句話「你也可以添加圖片...」 – leigero 2015-02-11 14:32:35

真的很簡單，用jQuery。以從你的問題你的小提琴：http://jsfiddle.net/L0f8ftdn/1/

$('.radiooption').on('click', function() { 
    $('.radiooption').removeClass('checked'); // Make all "unchecked" 
    $(this).addClass('checked'); // Make this one "checked" 
    $(this).prev('input').prop('checked', true); // Make the matching radio checked 
});

你的情況，你的.radiooption將有圖像背景，然後你可以用CSS隱藏你的輸入。

哦，對未來有幫助的一點：如果你想讓人們幫助你，不要成爲屁股，不要懶惰。

來源

2015-02-11 14:49:39

如何風格輸入類型=收音機？

回答

相關問題