Làm cách nào để thay đổi kích thước của nút radio bằng CSS?

Có cách nào để kiểm soát kích thước của nút radio trong CSS không?

Có, bạn sẽ có thể đặt chiều cao và chiều rộng của nó, như với bất kỳ phần tử nào. Tuy nhiên, một số trình duyệt không thực sự tính đến các thuộc tính này.

Bản trình diễn này cung cấp một cái nhìn tổng quan về những gì có thể và cách nó được hiển thị trong các trình duyệt khác nhau: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Như bạn sẽ thấy, việc tạo kiểu cho các nút radio không hề dễ dàng :-D

Một giải pháp khác là sử dụng JavaScript và CSS để thay thế các nút radio và các phần tử biểu mẫu khác bằng hình ảnh tùy chỉnh:

• https://github.com/emblematiq/Niceforms
• https://web.archive.org/web/20161119112447/http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Css này dường như thực hiện thủ thuật:

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

Đặt đường viền thành 0 dường như cho phép người dùng thay đổi kích thước của nút và để trình duyệt hiển thị nó ở kích thước đó chẳng hạn. chiều cao trên: 2em sẽ hiển thị nút ở hai lần chiều cao dòng. Điều này cũng hoạt động cho hộp kiểm ( input[type=checkbox]). Một số trình duyệt hiển thị tốt hơn những trình duyệt khác.

Từ hộp cửa sổ, nó hoạt động trên IE8 +, FF21 +, Chrome29 +.

Câu hỏi cũ nhưng bây giờ có một giải pháp đơn giản, tương thích với hầu hết các trình duyệt, đó là sử dụng CSS3. Tôi đã thử nghiệm trong IE, Firefox và Chrome và nó hoạt động.

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

Thay đổi giá trị 1.5, trong trường hợp này là kích thước gia tăng 50%, theo nhu cầu của bạn. Nếu tỷ lệ này rất cao, nó có thể làm mờ nút radio. Hình ảnh tiếp theo hiển thị tỷ lệ 1,5.

Bạn có thể kiểm soát kích thước của nút radio với kiểu css:

style = "height: 35px; width: 35px;"

Điều này trực tiếp kiểm soát kích thước nút radio.

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

Không trực tiếp. Trên thực tế, các phần tử biểu mẫu nói chung đều có vấn đề hoặc không thể tạo kiểu chỉ bằng CSS. cách tiếp cận tốt nhất là:

1. ẩn nút radio bằng javascript.
2. Sử dụng javascript để thêm / hiển thị HTML có thể được tạo kiểu theo cách bạn thích, ví dụ:
3. Xác định các quy tắc css cho một trạng thái đã chọn, được kích hoạt bằng cách thêm một lớp "được chọn" vào khoảng yuor.
4. Cuối cùng, viết javascript để làm cho trạng thái của nút radio phản ứng với các nhấp chuột trên nhịp và ngược lại, để nhịp phản ứng với những thay đổi trong trạng thái của nút radio (đối với khi người dùng sử dụng bàn phím để truy cập biểu mẫu). phần thứ hai của điều này có thể khó hoạt động trên tất cả các trình duyệt. Tôi sử dụng một cái gì đó như sau (cũng sử dụng jQuery. Tôi cũng tránh thêm các nhịp thừa bằng cách tạo kiểu và áp dụng lớp "đã chọn" trực tiếp vào các nhãn đầu vào).

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>

Thay đổi kích thước tiện ích con mặc định không hoạt động trong tất cả các trình duyệt, nhưng bạn có thể tạo các nút radio tùy chỉnh bằng JavaScript. Một trong những cách là tạo các nút radio ẩn và sau đó đặt hình ảnh của riêng bạn trên trang của bạn. Nhấp vào những hình ảnh này sẽ thay đổi hình ảnh (thay thế hình ảnh đã nhấp bằng hình ảnh có nút radio ở trạng thái đã chọn và thay thế các hình ảnh khác bằng nút radio ở trạng thái không được chọn) và chọn nút radio mới.

Dù sao, có tài liệu về chủ đề này. Ví dụ, hãy đọc phần này: Tạo kiểu cho Hộp kiểm và Nút radio với CSS và JavaScript .

Đây là một cách tiếp cận. Theo mặc định, các nút radio lớn gấp đôi các nhãn.
(Xem mã CSS và HTML ở cuối câu trả lời)

Safari: 10.0.3

Chrome: 56.0.2924.87

Firefox: 50.1.0

Internet Explorer: 9 (Fuzziness không phải lỗi của IE, thử nghiệm được lưu trữ trên 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>                

Trực tiếp bạn không thể làm điều này. [Theo hiểu biết của tôi].

Bạn nên sử dụng imagesđể thay thế các nút radio. Bạn có thể làm cho chúng hoạt động theo cách tương tự như các nút radio trong hầu hết các trường hợp và bạn có thể đặt chúng ở bất kỳ kích thước nào bạn muốn.

Bạn cũng có thể sử dụng thuộc tính chuyển đổi, với giá trị bắt buộc theo tỷ lệ:

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

Điều này hoạt động tốt cho tôi trong tất cả các trình duyệt:

(kiểu nội tuyến cho đơn giản ...)

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

Kích thước của cả nút radio và văn bản sẽ thay đổi theo kích thước phông chữ của nhãn.

hãy thử mã này ... nó có thể là những gì bạn đang tìm kiếm chính xác

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

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

h2 {
	color: #AAAAAA;
}

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

ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	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{
	color: #FFFFFF;
}

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

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

ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-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>

<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>