CSS kullanarak radyo düğmesinin boyutu nasıl değiştirilir?

CSS'de radyo düğmesinin boyutunu kontrol etmenin bir yolu var mı?

Evet, herhangi bir öğede olduğu gibi yüksekliğini ve genişliğini ayarlayabilmelisiniz. Ancak bazı tarayıcılar bu özellikleri gerçekten hesaba katmaz.

Bu demo, neyin mümkün olduğuna ve çeşitli tarayıcılarda nasıl görüntülendiğine dair genel bir bakış sunar: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Göreceğiniz gibi, radyo düğmelerinin stilini ayarlamak kolay değil :-D

Çözüm, radyo düğmelerini ve diğer form öğelerini özel görüntülerle değiştirmek için JavaScript ve CSS kullanmaktır:

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

Bu css hile yapıyor gibi görünüyor:

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

Kenarlığın 0 olarak ayarlanması, kullanıcının düğmenin boyutunu değiştirmesine ve tarayıcının bunu örneğin bu boyutta oluşturmasına izin veriyor gibi görünüyor. yukarıdaki yükseklik: 2em, düğmeyi satır yüksekliğinin iki katı yükseklikte oluşturacaktır. Bu aynı zamanda onay kutuları ( input[type=checkbox]) için de işe yarar . Bazı tarayıcılar diğerlerinden daha iyi çalışır.

Bir Windows kutusundan IE8 +, FF21 +, Chrome29 + ile çalışır.

Eski bir soru ama şimdi çoğu tarayıcıyla uyumlu, kullanılacak basit bir çözüm var CSS3. IE, Firefox ve Chrome'da test ettim ve çalışıyor.

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

Değeri değiştirin, 1.5bu durumda ihtiyaçlarınıza göre boyut olarak% 50 artış. Oran çok yüksekse, radyo düğmesini bulanıklaştırabilir. Bir sonraki görüntü 1.5 oranını göstermektedir.

Radyo düğmesinin boyutunu css stiliyle kontrol edebilirsiniz:

style = "yükseklik: 35px; genişlik: 35px;"

Bu, doğrudan radyo düğmesi boyutunu kontrol eder.

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

Direkt olarak değil. Aslında, genel olarak form öğeleri ya sorunludur ya da tek başına CSS kullanarak biçimlendirmek imkansızdır. en iyi yaklaşım şudur:

1. javascript kullanarak radyo düğmesini gizleyin.
2. İstediğiniz gibi şekillendirilebilen HTML eklemek / görüntülemek için javascript kullanın, örneğin
3. Yuor span'a "selected" sınıfı eklenerek tetiklenen, seçilen bir durum için css kurallarını tanımlayın.
4. Son olarak, radyo düğmesinin durumunun aralıktaki tıklamalara tepki vermesini sağlamak için javascript yazın ve bunun tersi, aralığın radyo düğmesinin durumundaki değişikliklere tepki vermesini sağlamak için (kullanıcıların forma erişmek için klavyeyi kullandıklarında). bunun ikinci bölümü tüm tarayıcılarda çalışmak için zor olabilir. Aşağıdakine benzer bir şey kullanıyorum (jQuery de kullanıyor. "Seçili" sınıfın stilini belirleyerek ve doğrudan giriş etiketlerine uygulayarak fazladan aralıklar eklemekten de kaçınıyorum).

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>

Varsayılan widget'ı yeniden boyutlandırmak tüm tarayıcılarda çalışmaz, ancak JavaScript ile özel radyo düğmeleri oluşturabilirsiniz. Yollardan biri, gizli radyo düğmeleri oluşturmak ve ardından kendi görsellerinizi sayfanıza yerleştirmektir. Bu görüntülere tıklamak, görüntüleri değiştirir (tıklanan görüntüyü, seçili durumda bir radyo düğmesi olan bir görüntü ile değiştirir ve diğer görüntüleri seçilmemiş durumda radyo düğmeleriyle değiştirir) ve yeni radyo düğmesini seçer.

Her neyse, bu konuda belgeler var. Örneğin, şunu okuyun: CSS ve JavaScript ile Onay Kutularının ve Radyo Düğmelerinin Stilini Ayarlama .

İşte bir yaklaşım. Varsayılan olarak radyo düğmeleri, etiketlerin yaklaşık iki katı büyüklüğündeydi.
(Cevabın sonundaki CSS ve HTML koduna bakın)

Safari: 10.0.3

Chrome: 56.0.2924.87

Firefox: 50.1.0

Internet Explorer: 9 (Bulanıklık IE'nin hatası değil, netrenderer.com'da barındırılan test)

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>                

Doğrudan bunu yapamazsınız. [Bildiğim kadarıyla].

imagesRadyo düğmelerini değiştirmek için kullanmalısınız . Bunların çoğu durumda radyo düğmeleriyle aynı şekilde çalışmasını sağlayabilir ve onları istediğiniz boyutta yapabilirsiniz.

Bu, tüm tarayıcılarda benim için iyi çalışıyor:

(basitlik için satır içi stil ...)

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

Hem radyo düğmesinin hem de metnin boyutu, etiketin yazı tipi boyutuna göre değişecektir.

Ayrıca, ölçeklendirmede gerekli değerle dönüştürme özelliğini de kullanabilirsiniz:

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

bu kodu deneyin ... tam olarak aradığınız şey olabilir

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>