使單選按鈕變大？

有什麼辦法可以使用CSS來增大單選按鈕嗎？使單選按鈕變大？

如果不是，我該怎麼辦呢？

2010-12-23 Latox

究竟是什麼你想在這裏實現什麼？可能是有一個替代解決方案....像仿真單選按鈕使用圖像.... – Starx 2010-12-23 06:09:24

http：// stackoverflow。com/questions/7727255/how-can-i-make-an-html-radiobutton-with-a-big-target-area – 2013-09-24 15:43:46

@ChristopheRoussy問題，你已經鏈接了，與這個OP的問題無關。在這裏，要求更大的單選按鈕（解決方案是改變`input`元素的樣式），而在你的鏈接問題中，OP詢問更大的「可點擊」區域（解決方案是改變`label`樣式）。相反，[這裏]（http://stackoverflow.com/a/4920348/1469208）是適合OP在這個問題中提出的問題的答案。最快的答案（（c）[imanabidi]（http://stackoverflow.com/users/184572/imanabidi）） - 「設置寬度和高度，並使用em度量，如：width：1.2em; height：1.2em」。 – trejder 2014-04-07 12:10:29

看到此鏈接可能是它的幫助你

http://www.thecssninja.com/css/custom-inputs-using-css

來源

2010-12-23 05:55:17

有可能是無線電元件內部的一些離奇的招數<span>但我想象使用它們在不同瀏覽器將是惱人的調試。

我以前用過this script但不是最近。

來源

2010-12-23 05:53:28 Cole

可以使用CSS，但瀏覽器和操作系統也影響對這個做到這一點。看看下面的文章。

Styling radio buttons with CSS

來源

2010-12-23 05:56:04 NAVEED

您可以輕鬆地就能設置它的高度和寬度與任何元素。

這裏是代碼小提琴

JSFIDDLE BIG RADIO BUTTON

HTML

<input id="r1" type="radio" name="group1" class="radio1" /> 
<label for="r1">label 1 text</label> 
<input id="r2" type="radio" name="group1" class="radio2" /> 
<label for="r2">label 2 text</label> 
<input id="r3" type="radio" name="group1" class="radio3" /> 
<label for="r3">label 3 text</label> 
<input id="r4" type="radio" name="group1" class="radio4" /> 
<label for="r4">label 4 text</label>

CSS

input[type=radio] { 
    display: none; 
} 
input[type=radio] + label::before { 
    content: ''; 
    display: inline-block; 
    border: 1px solid #000; 
    border-radius: 50%; 
    margin: 0 0.5em; 
} 
input[type=radio]:checked + label::before { 
    background-color: #ffa; 
} 

.radio1 + label::before { 
    width: 0.5em; 
    height: 0.5em; 
} 

.radio2 + label::before { 
    width: 0.75em; 
    height: 0.75em; 
} 

.radio3 + label::before { 
    width: 1em; 
    height: 1em; 
} 

.radio4 + label::before { 
    width: 1.5em; 
    height: 1.5em; 
}

造型單選按鈕沒有很容易。

使用CSS alone時，表單元素通常是有問題的或不可能使用CSS alone。

只需通過這個鏈接，你自己的風格與單選按鈕更大尺寸..

也看看這個鏈接...

Bigger radio buttons

來源

2014-04-22 13:24:23 KesaVan

試試這個：

HTML

<label> 
    <input type="radio" value="1"> 
    <div></div> 
</label>

CSS

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

input[type="radio"] + div { 
    height: 20px; 
    width: 20px; 
    display: inline-block; 
    cursor: pointer; 
    vertical-align: middle; 
    background: #FFF; 
    border: 1px solid #d2d2d2; 
    border-radius: 100%; 
} 

input[type="radio"] + div:hover { 
    border-color: #c2c2c2; 
} 

input[type="radio"]:checked + div { 
    background:gray; 
}

DEMO：http://jsfiddle.net/nuzhysgg/

來源

2014-11-07 09:10:35

試試這個代碼：

input[type='radio'] { transform: scale(2); }

來源

2015-10-14 10:37:22

使單選按鈕變大？

回答

相關問題