Bagaimana cara mengubah ukuran tombol radio menggunakan CSS?

Apakah ada cara untuk mengontrol ukuran tombol radio di CSS?

Ya, Anda harus dapat mengatur tinggi dan lebarnya, seperti pada elemen apa pun. Namun, beberapa browser tidak benar-benar memperhitungkan properti ini.

Demo ini memberikan gambaran umum tentang apa yang mungkin dan bagaimana itu ditampilkan di berbagai browser: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Seperti yang akan Anda lihat, mengatur gaya tombol radio tidaklah mudah :-D

Solusinya adalah dengan menggunakan JavaScript dan CSS untuk mengganti tombol radio dan elemen formulir lainnya dengan gambar khusus:

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

Css ini sepertinya berhasil:

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

Mengatur batas ke 0 tampaknya memungkinkan pengguna untuk mengubah ukuran tombol dan meminta browser merendernya dalam ukuran itu misalnya. tinggi di atas: 2em akan membuat tombol dua kali tinggi garis. Ini juga berfungsi untuk kotak centang ( input[type=checkbox]). Beberapa browser merender lebih baik dari yang lain.

Dari kotak windows itu bekerja di IE8 +, FF21 +, Chrome29 +.

Pertanyaan lama tetapi sekarang ada solusi sederhana, kompatibel dengan sebagian besar browser, yang akan digunakan CSS3. Saya menguji di IE, Firefox dan Chrome dan berhasil.

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

Ubah nilainya 1.5, dalam hal ini peningkatan ukuran 50%, sesuai kebutuhan Anda. Jika rasionya sangat tinggi, tombol radio dapat mengaburkan. Gambar selanjutnya menunjukkan rasio 1,5.

Anda dapat mengontrol ukuran tombol radio dengan gaya css:

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

Ini secara langsung mengontrol ukuran tombol radio.

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

Tidak secara langsung. Faktanya, elemen formulir secara umum bermasalah atau tidak mungkin untuk ditata hanya dengan CSS. pendekatan terbaik adalah:

1. sembunyikan tombol radio menggunakan javascript.
2. Gunakan javascript untuk menambah / menampilkan HTML yang dapat ditata sesuka Anda misalnya
3. Tentukan aturan css untuk status yang dipilih, yang dipicu dengan menambahkan kelas "dipilih" ke rentang yuor.
4. Terakhir, tulis javascript untuk membuat status tombol radio bereaksi terhadap klik pada span, dan sebaliknya, untuk mendapatkan span agar bereaksi terhadap perubahan status tombol radio (saat pengguna menggunakan keyboard untuk mengakses formulir). bagian kedua ini bisa jadi sulit untuk berfungsi di semua browser. Saya menggunakan sesuatu seperti berikut (yang juga menggunakan jQuery. Saya juga menghindari penambahan span ekstra dengan menata gaya dan menerapkan kelas "yang dipilih" langsung ke label input).

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>

Mengubah ukuran widget default tidak berfungsi di semua browser, tetapi Anda dapat membuat tombol radio kustom dengan JavaScript. Salah satu caranya adalah dengan membuat tombol radio tersembunyi dan kemudian menempatkan gambar Anda sendiri di halaman Anda. Mengklik gambar ini mengubah gambar (menggantikan gambar yang diklik dengan gambar dengan tombol radio dalam status yang dipilih dan mengganti gambar lain dengan tombol radio dalam keadaan tidak dipilih) dan memilih tombol radio baru.

Bagaimanapun, ada dokumentasi tentang hal ini. Misalnya, baca ini: Menggayai Kotak Centang dan Tombol Radio dengan CSS dan JavaScript .

Inilah satu pendekatan. Secara default, tombol radio berukuran dua kali lebih besar dari label.
(Lihat kode CSS dan HTML di akhir jawaban)

Safari: 10.0.3

Chrome: 56.0.2924.87

Firefox: 50.1.0

Internet Explorer: 9 (Ketidakjelasan bukan kesalahan IE, pengujian yang dihosting di 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>                

Secara langsung Anda tidak bisa melakukan ini. [Sesuai pengetahuan saya].

Anda harus menggunakan imagesuntuk menggantikan tombol radio. Anda dapat membuatnya berfungsi dengan cara yang sama seperti tombol radio di sebagian besar casing, dan Anda dapat membuatnya dalam ukuran berapa pun yang Anda inginkan.

Ini berfungsi dengan baik untuk saya di semua browser:

(gaya sebaris untuk kesederhanaan ...)

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

Ukuran tombol radio dan teks akan berubah sesuai dengan ukuran font label.

Anda juga dapat menggunakan properti transform, dengan nilai yang diperlukan dalam skala:

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

coba kode ini ... mungkin itu jawaban yang Anda cari

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>