造型單選按鈕

我試圖做出更大的單選按鈕，沒有任何運氣。

這是一個自定義WP插件，所有者不支持這些類型的問題的用戶。我試圖按照很多教程這樣one，但代碼結構一般是不同的：

我的代碼是

<li class="wpProQuiz_questionListItem" data-pos="1"> 
    <span style="display:none;">1. </span> 
    <label> 
     <input class="wpProQuiz_questionInput" type="radio" name="question_1" value="323"/> 
     Answer 1 
    </label> 
</li>

，並在教程的代碼是作爲

<td> 
    <input type="radio" name="radiog_dark" id="radio1" class="css-checkbox" /> 
    <label for="radio1" class="css-label radGroup2">Option 1</label> 
</td>

誰能幫我？

Riccardo

來源

2014-08-31 Riccardo79

你可以使用** CSS3 **嗎？ – dashtinejad 2014-08-31 08:45:13

我想你想讓更容易看到懸停在答案上時突出顯示哪個答案。現在只有單選按鈕改變顏色，這並不明顯。你可以添加：懸停狀態到你的CSS讓選擇更突出。 – RST 2014-08-31 08:45:40

@ROX：是的，我可以 – Riccardo79 2014-08-31 08:46:45

的HTML標記：

<ul> 
    <li> 
     <label> 
      <input class="wpProQuiz_questionInput" type="radio" name="question_1_2" value="3" /> 
      <span class="graphical-radio"></span> 
      Non riesco a lasciarlo solo 
     </label> 
    </li> 
</ul>

的CSS：

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

.graphical-radio { 
    background: gray; 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    border-radius: 100%; 
} 

input[type="radio"]:checked + .graphical-radio { 
    background: red; 
}

神奇的是與:checked選擇，這樣你就可以風格的graphical-radio你想要的。

jsFiddle Demo。

來源

2014-08-31 08:55:19 dashtinejad

好的解決方案，把它放在標籤 – Gersom 2014-08-31 08:58:22

是的，這是一個不錯的解決方案！您剛剛在答案部分添加了一個範圍。謝謝！ – Riccardo79 2014-08-31 09:04:42

表單元素樣式幾乎不可能跨瀏覽器。我會去一個自定義設計的元素，它反映了使用javascript的隱藏複選框的狀態。

來源

2014-08-31 08:40:46 Gersom

你能發佈一個js片段嗎？我會努力... – Riccardo79 2014-08-31 08:50:53

如果自定義元素是你想要的，我可以做一個，並將其添加到這個答案。無聊此刻，所以沒問題; P。你已經在你的頁面中包含jQuery嗎？ – Gersom 2014-08-31 08:54:43

謝謝，不要浪費你的時間。我認爲@ ROX的解決方案更好！ – Riccardo79 2014-08-31 09:03:55

造型單選按鈕

回答

相關問題