如何使用CSS更改單選按鈕的大小？

38

是的，您應該可以像設置任何元素一樣設置它的高度和寬度。但是，有些瀏覽器並未真正考慮這些屬性。

本演示概述了在各種瀏覽器中顯示的內容和方式。 http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

正如你所看到的，造型單選按鈕是不容易:-D

一種解決方法是使用JavaScript和CSS自定義圖片來代替單選按鈕和其他形式的元素：
http://www.emblematiq.com/lab/niceforms/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
...

來源

2011-02-07 10:45:29 LapinLove404

+4

同時設置寬度和高度，使用EM度量信息，如：寬度：1.2em;身高：1.2em; – 2013-11-09 11:06:30

+0

現在[你可以使用CSS3]（https://stackoverflow.com/questions/4920281/how-to-change-the-size-of-the-radio-button-using-css/45654519#45654519），它作品。 – 2017-08-12 20:15:04

1

直接你不能這樣做。 [根據我的知識]。

您應該使用images取代單選按鈕。在大多數情況下，您可以按照與單選按鈕相同的方式使它們起作用，並且可以將它們製作成任意大小。

來源

2011-02-07 10:43:28

3

調整大小的默認控件在所有瀏覽器無法正常工作，但你可以自定義單選按鈕使用JavaScript。其中一種方法是創建隱藏的單選按鈕，然後在頁面上放置自己的圖像。點擊這些圖像可以改變圖像（用單選按鈕處於選定狀態的圖像取代點擊的圖像，並用處於未選狀態的單選按鈕取代其他圖像）並選擇新的單選按鈕。

無論如何，有關於這個問題的文件。例如，請閱讀：Styling Checkboxes and Radio Buttons with CSS and JavaScript。

來源

2011-02-07 10:47:57 aruseni

3

不是直接。事實上，一般情況下，表單元素不是單獨使用CSS就會有問題或不可能。最好的辦法是：

使用javascript隱藏單選按鈕。
使用javascript添加/顯示可以設計風格的HTML，例如
爲選定狀態定義css規則，這是通過向yuor跨度中添加「selected」類觸發的。
最後，編寫javascript以使單選按鈕的狀態對跨度上的點擊作出反應，反之亦然，以獲得跨度對單選按鈕狀態中的更改作出反應（用於用戶使用鍵盤訪問表單時）。第二部分可能會非常棘手，無法跨越所有瀏覽器。我使用類似以下的東西（也使用jQuery，我避免通過樣式和直接將「selected」類應用於輸入標籤來增加額外的跨度）。

的JavaScript

var labels = $("ul.radioButtons).delegate("input", "keyup", function() { //keyboard use 
     if (this.checked) { 
      select($(this).parent()); 
     } 
    }).find("label").bind("click", function (event) { //mouse use 
     select($(this)); 
    }); 

function select(el) { 
    labels.removeClass("selected"); 
    el.addClass("selected"); 
}

HTML

<ul class="radioButtons"> 
    <li> 
     <label for="employee1"> 
      employee1 
      <input type="radio" id="employee1" name="employee" /> 
     </label> 
    </li> 
    <li> 
     <label for="employee2"> 
      employee1 
      <input type="radio" id="employee2" name="employee" /> 
     </label> 
    </li> 
</ul>

來源

2011-02-07 10:54:01 wheresrhys

25

雖然一個老問題，其對這一問題的多數選票。我有最近遇到的另一個解決方案。這個CSS似乎有伎倆。

input[type=radio] { 
    border: 0px; 
    width: 100%; 
    height: 2em; 
}

設置邊框爲0，似乎允許用戶更改按鈕的大小，讓瀏覽器渲染它在大小如。上面的高度：2em將渲染按鈕的兩倍線高度。這也適用於複選框（輸入[type = checkbox]）。有些瀏覽器呈現比其他瀏覽器更好。

從一個窗口框中它在ie8 +，ff21 +，chrome29 +中工作。

乾杯。

來源

2013-09-04 07:34:03 user2745744

+1

這似乎不適用於我的Chrome。 – Will 2015-02-11 11:30:12

+0

在鉻中爲我做出了小小的貢獻。 – Pocketsand 2017-05-09 21:38:41

+0

@對於Chrome來說似乎只適用於Windows。 – dlsso 2017-06-10 01:32:18

-3

<html> 
    <head> 
    </head> 
    <body> 

<style> 
.redradio {border:5px black solid;border-radius:25px;width:25px;height:25px;background:red;float:left;} 
.greenradio {border:5px black solid;border-radius:25px;width:29px;height:29px;background:green;float:left;} 
.radiobuttons{float:left;clear:both;margin-bottom:10px;} 
</style> 
<script type="text/javascript"> 
<!-- 
function switchON(groupelement,groupvalue,buttonelement,buttonvalue) { 
    var groupelements = document.getElementById(groupelement); 
    var buttons = groupelements.getElementsByTagName("button"); 
    for (i=0;i<buttons.length;i++) { 
     if (buttons[i].id.indexOf("_on") != -1) { 
      buttons[i].style.display="none"; 
     } else { 
      buttons[i].style.display="block"; 
     } 
    } 
    var buttonON = buttonelement + "_button_on"; 
    var buttonOFF = buttonelement + "_button_off"; 
    document.getElementById(buttonON).style.display="block"; 
    document.getElementById(buttonOFF).style.display="none"; 
    document.getElementById(groupvalue).value=buttonvalue; 
} 
// --> 
</script> 

<form> 
    <h1>farbige Radiobutton</h1> 
    <div id="button_group"> 
     <input type="hidden" name="button_value" id="button_value" value=""/> 
     <span class="radiobuttons"> 
      <button type="button" value="OFF1" name="button1_button_off" id="button1_button_off" onclick="switchON('button_group','button_value','button1',this.value)" class="redradio"></button> 
      <button type="button" value="ON1" name="button1_button_on" id="button1_button_on" style="display:none;" class="greenradio"></button> 
      <label for="button1_button_on">&nbsp;&nbsp;Ich will eins</label> 
     </span><br/> 
     <span class="radiobuttons"> 
      <button type="button" value="OFF2" name="button2_button_off" id="button2_button_off" onclick="switchON('button_group','button_value','button2',this.value)" class="redradio"></button> 
      <button type="button" value="ON2" name="button2_button_on" id="button2_button_on" style="display:none;" class="greenradio"></button> 
      <label for="button2_button_on">&nbsp;&nbsp;Ich will zwei</label> 
     </span><br/> 
     <span class="radiobuttons"> 
      <button type="button" value="OFF3" name="button3_button_off" id="button3_button_off" onclick="switchON('button_group','button_value','button3',this.value)" class="redradio"></button> 
      <button type="button" value="ON3" name="button3_button_on" id="button3_button_on" style="display:none;" class="greenradio"></button> 
      <label for="button3_button_on">&nbsp;&nbsp;Ich will drei</label> 
     </span><br/> 
     <span class="radiobuttons"> 
      <button type="button" value="OFF4" name="button4_button_off" id="button4_button_off" onclick="switchON('button_group','button_value','button4',this.value)" class="redradio"></button> 
      <button type="button" value="ON4" name="button4_button_on" id="button4_button_on" style="display:none;" class="greenradio"></button> 
      <label for="button4_button_on">&nbsp;&nbsp;Ich will vier</label> 
     </span> 
    </div> 
</form> 

    </body> 
</html>

來源

2013-09-24 20:16:56

+1

對此如何進行評論或說明會很有幫助。 – 2013-09-24 20:34:05

+2

如果在源代碼開始時沒有結構錯誤，那將會很有用。 – 2013-12-12 14:00:36

3

可以控制單選按鈕與CSS樣式尺寸：

風格= 「高度：35px;寬度：35px;」

這直接控制單選按鈕的大小。

<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">

來源

2015-12-20 22:52:50 Tarik

+0

爲防止刪除，請編輯並解釋其原因。 – 2015-12-21 00:29:32

1

下面是一種方法。默認情況下，單選按鈕大約是標籤的兩倍。
（見CSS和HTML代碼在回答完）

Safari: 10.0.3

Chrome: 56.0.2924.87

Firefox: 50.1.0

Internet Explorer: 9（模糊不是IE的錯，託管在netrenderer.com測試）

CSS：

.sortOptions > label { 
    font-size:   8px; 
} 

.sortOptions > input[type=radio] { 
    width:    10px; 
    height:    10px; 
}

HTML：

<div class="rightColumn">Answers 
    <span class="sortOptions"> 
     <input type="radio" name="answerSortList" value="credate"/> 
     <label for="credate">Creation</label> 

     <input type="radio" name="answerSortList" value="lastact"/> 
     <label for="lastact">Activity</label> 

     <input type="radio" name="answerSortList" value="score"/> 
     <label for="score">Score</label> 

     <input type="radio" name="answerSortList" value="upvotes"/> 
     <label for="upvotes">Up votes</label> 

     <input type="radio" name="answerSortList" value="downvotes"/> 
     <label for="downvotes">Down Votes</label> 

     <input type="radio" name="answerSortList" value="accepted"/> 
     <label for="downvotes">Accepted</label> 

    </span> 
</div>

來源

2017-02-26 01:00:45 clearlight

-2

試試這個代碼...這可能就是你到底找

body, html{ 
 
    height: 100%; 
 
    background: #222222; 
 
} 
 

 
.container{ 
 
    display: block; 
 
    position: relative; 
 
    margin: 40px auto; 
 
    height: auto; 
 
    width: 500px; 
 
    padding: 20px; 
 
} 
 

 
h2 { 
 
\t color: #AAAAAA; 
 
} 
 

 
.container ul{ 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
\t overflow: auto; 
 
} 
 

 
ul li{ 
 
    color: #AAAAAA; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    width: 100%; 
 
    height: 100px; 
 
\t border-bottom: 1px solid #333; 
 
} 
 

 
ul li input[type=radio]{ 
 
    position: absolute; 
 
    visibility: hidden; 
 
} 
 

 
ul li label{ 
 
    display: block; 
 
    position: relative; 
 
    font-weight: 300; 
 
    font-size: 1.35em; 
 
    padding: 25px 25px 25px 80px; 
 
    margin: 10px auto; 
 
    height: 30px; 
 
    z-index: 9; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.25s linear; 
 
} 
 

 
ul li:hover label{ 
 
\t color: #FFFFFF; 
 
} 
 

 
ul li .check{ 
 
    display: block; 
 
    position: absolute; 
 
    border: 5px solid #AAAAAA; 
 
    border-radius: 100%; 
 
    height: 25px; 
 
    width: 25px; 
 
    top: 30px; 
 
    left: 20px; 
 
\t z-index: 5; 
 
\t transition: border .25s linear; 
 
\t -webkit-transition: border .25s linear; 
 
} 
 

 
ul li:hover .check { 
 
    border: 5px solid #FFFFFF; 
 
} 
 

 
ul li .check::before { 
 
    display: block; 
 
    position: absolute; 
 
\t content: ''; 
 
    border-radius: 100%; 
 
    height: 15px; 
 
    width: 15px; 
 
    top: 5px; 
 
\t left: 5px; 
 
    margin: auto; 
 
\t transition: background 0.25s linear; 
 
\t -webkit-transition: background 0.25s linear; 
 
} 
 

 
input[type=radio]:checked ~ .check { 
 
    border: 5px solid #0DFF92; 
 
} 
 

 
input[type=radio]:checked ~ .check::before{ 
 
    background: #0DFF92; 
 
}

<ul> 
 
    <li> 
 
    <input type="radio" id="f-option" name="selector"> 
 
    <label for="f-option">Male</label> 
 
    
 
    <div class="check"></div> 
 
    </li> 
 
    
 
    <li> 
 
    <input type="radio" id="s-option" name="selector"> 
 
    <label for="s-option">Female</label> 
 
    
 
    <div class="check"><div class="inside"></div></div> 
 
    </li> 
 
    
 
    <li> 
 
    <input type="radio" id="t-option" name="selector"> 
 
    <label for="t-option">Transgender</label> 
 
    
 
    <div class="check"><div class="inside"></div></div> 
 
    </li> 
 
</ul>

來源

2017-06-07 06:28:28 Mausumi

5

老問題俺們但現在有一個簡單的解決方案，與大多數瀏覽器兼容是使用CSS3。我在IE，Firefox和Chrome中測試過，它可以工作。

input[type="radio"] { 
    -ms-transform: scale(1.5); /* IE 9 */ 
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */ 
    transform: scale(1.5); 
}

更改根據您的需要的價值1.5，在這種情況下，在大小50％的增量。如果比例非常高，則可能會模糊單選按鈕。下一張圖片顯示比率爲1.5。

來源

2017-08-12 20:12:28

0

這工作正常，我在所有瀏覽器：

（爲簡單起見內嵌樣式...）

<label style="font-size:16px;"> 
    <input style="height:1em; width:1em;" type="radio"> 
    <span>Button One</span> 
</label>

兩個單選按鈕的大小文字將隨標籤的字體大小而變化。

來源

2017-09-15 20:22:55

1

您還可以在規模使用變換屬性，與所需的值：

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

來源

2017-09-15 20:29:59

0

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
input[type="radio"] { 
 
    -ms-transform: scale(1.5); /* IE 9 */ 
 
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */ 
 
    transform: scale(1.5); 
 
} 
 
    </style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Form control: inline radio buttons</h2> 
 
    <p>The form below contains three inline radio buttons:</p> 
 
    <form> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="optradio">Option 1 
 
    </label> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="optradio">Option 2 
 
    </label> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="optradio">Option 3 
 
    </label> 
 
    </form> 
 
</div> 
 

 
</body> 
 
</html>

來源

2018-01-05 05:34:18

如何使用CSS更改單選按鈕的大小？

回答

相關問題