如何設置單選按鈕的樣式,使其看起來像普通的可點擊按鈕? (How do I style a radio button to look like a normal clickable button?)


問題描述

如何設置單選按鈕的樣式,使其看起來像普通的可點擊按鈕? (How do I style a radio button to look like a normal clickable button?)

我正在嘗試讓我的單選按鈕看起來像普通按鈕 ‑ 我該怎麼做?我已經看到了很多關於此的其他問題,但我無法得到明確的答案。這是我嘗試過的:

<input name="question${questionNumber}" id="q&a" class="press" type="radio" value="${letter}"><label for="q&a">${letter}</label>

但是,我的 javascript 代碼沒有記錄它,我仍然需要單擊 javascript 的單選按鈕才能識別我點擊了按鈕,只有當我點擊單選按鈕時才能找到它的值。我該如何解決這個問題?


參考解法

方法 1:

Why use a radio button at all if you want it to look like a normal button? Radio buttons are for selecting 1 option out of many, like in a multiple‑choice test. Their design reflects this purpose and most people know how to interact with radio buttons when they see them. If you use a normal button, you can use

Element.addEventListener(“click” function() {
    // do your stuff
})

(by PradhayLebster)

參考文件

  1. How do I style a radio button to look like a normal clickable button? (CC BY‑SA 2.5/3.0/4.0)

#jquery #javascript #css #html #button






相關問題

讓 jQuery 與 Netscape 7 和 8 一起工作 (Getting jQuery to work with Netscape 7 and 8)

使用 Jquery 的 mvc3 搜索結果 (mvc3 search results with Jquery)

從嵌套的 jquery 函數返回一個值 (Return a value from nested jquery function)

Mencocokkan lebar divisi dengan jquery (Matching division widths with jquery)

無法在 jQuery AJAX 中多次生成點擊事件 (unable to generate click event more than once in jQuery AJAX)

使用雙引號格式並用逗號分隔元素數組 (Implode an element array with double quote format and separated by comma)

選擇不更新 (Select doesn't update)

chrome中帶有省略號的多行文本問題 (issue with multiline text with ellipsis in chrome)

AJAX/PHP/JS - 無法將頁面內容加載到容器中 (AJAX/PHP/JS - Cannot load page content into container)

使用 jQuery 將文本插入 textarea (Insert text into textarea with jQuery)

滾動到頁面底部,僅當用戶在 DOM 操作之前已經位於底部時 (Scroll to bottom of page, only if the user already was at the bottom before DOM manipulation)

如何設置單選按鈕的樣式,使其看起來像普通的可點擊按鈕? (How do I style a radio button to look like a normal clickable button?)







留言討論