Wie ändere ich die Größe des Optionsfelds mithilfe von CSS?

Gibt es eine Möglichkeit, die Größe des Optionsfelds in CSS zu steuern?

Ja, Sie sollten in der Lage sein, die Höhe und Breite wie bei jedem Element einzustellen. Einige Browser berücksichtigen diese Eigenschaften jedoch nicht wirklich.

Diese Demo gibt einen Überblick darüber, was möglich ist und wie es in verschiedenen Browsern angezeigt wird: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Wie Sie sehen werden, ist das Stylen von Optionsfeldern nicht einfach :-D

Eine Problemumgehung besteht darin, JavaScript und CSS zu verwenden, um die Optionsfelder und andere Formularelemente durch benutzerdefinierte Bilder zu ersetzen:

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

Diese CSS scheint den Trick zu tun:

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

Das Setzen des Rahmens auf 0 scheint es dem Benutzer zu ermöglichen, die Größe der Schaltfläche zu ändern und sie vom Browser in dieser Größe rendern zu lassen, z. die obige Höhe: 2em rendert die Schaltfläche auf der doppelten Zeilenhöhe. Dies funktioniert auch für Kontrollkästchen ( input[type=checkbox]). Einige Browser rendern besser als andere.

Von einer Windows-Box aus funktioniert es in IE8 +, FF21 +, Chrome29 +.

Alte Frage, aber jetzt gibt es eine einfache Lösung, die mit den meisten Browsern kompatibel ist CSS3 . Ich habe in IE, Firefox und Chrome getestet und es funktioniert.

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

Ändern Sie den Wert 1.5, in diesem Fall um 50%, entsprechend Ihren Anforderungen. Wenn das Verhältnis sehr hoch ist, kann das Optionsfeld unscharf werden. Das nächste Bild zeigt ein Verhältnis von 1,5.

Sie können die Größe des Optionsfelds mit dem CSS-Stil steuern:

style = "Höhe: 35px; Breite: 35px;"

Dies steuert direkt die Größe des Optionsfelds.

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

Nicht direkt. Tatsächlich sind Formularelemente im Allgemeinen entweder problematisch oder können nur mit CSS formatiert werden. Der beste Ansatz ist:

1. Blenden Sie das Optionsfeld mit Javascript aus.
2. Verwenden Sie Javascript, um HTML hinzuzufügen / anzuzeigen, das nach Ihren Wünschen gestaltet werden kann, z
3. Definieren Sie CSS-Regeln für einen ausgewählten Status, der durch Hinzufügen einer Klasse "ausgewählt" zu Ihrer Spanne ausgelöst wird.
4. Schreiben Sie abschließend Javascript, damit der Status des Optionsfelds auf Klicks auf den Bereich reagiert, und umgekehrt, damit der Bereich auf Änderungen des Status des Optionsfelds reagiert (wenn Benutzer die Tastatur verwenden, um auf das Formular zuzugreifen). Der zweite Teil davon kann schwierig sein, mit allen Browsern zu arbeiten. Ich verwende etwa Folgendes (das auch jQuery verwendet. Ich vermeide es, zusätzliche Bereiche hinzuzufügen, indem ich die "ausgewählte" Klasse direkt auf die Eingabebeschriftungen gestalte und anwende).

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>

Das Ändern der Größe des Standard-Widgets funktioniert nicht in allen Browsern. Sie können jedoch benutzerdefinierte Optionsfelder mit JavaScript erstellen. Eine Möglichkeit besteht darin, versteckte Optionsfelder zu erstellen und dann Ihre eigenen Bilder auf Ihrer Seite zu platzieren. Durch Klicken auf diese Bilder werden die Bilder geändert (ersetzt das angeklickte Bild durch ein Bild mit einem Optionsfeld in einem ausgewählten Status und ersetzt die anderen Bilder durch Optionsfelder in einem nicht ausgewählten Status) und das neue Optionsfeld ausgewählt.

Auf jeden Fall gibt es Dokumentation zu diesem Thema. Lesen Sie zum Beispiel Folgendes : Gestalten von Kontrollkästchen und Optionsfeldern mit CSS und JavaScript .

Hier ist ein Ansatz. Standardmäßig waren die Optionsfelder etwa doppelt so groß wie Beschriftungen.
(Siehe CSS- und HTML-Code am Ende der Antwort.)

Safari: 10.0.3

Chrome: 56.0.2924.87

Firefox: 50.1.0

Internet Explorer: 9 (Unschärfe nicht IE Schuld, gehosteter Test auf 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>                

Direkt kann man das nicht machen. [Nach meinem Wissen].

Sie sollten verwenden images, um die Optionsfelder zu ersetzen. Sie können festlegen, dass sie in den meisten Fällen auf die gleiche Weise wie die Optionsfelder funktionieren, und Sie können sie in jeder gewünschten Größe erstellen.

Sie können auch die transform-Eigenschaft mit dem erforderlichen Wert in scale verwenden:

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

Dies funktioniert gut für mich in allen Browsern:

(Inline-Stil zur Vereinfachung ...)

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

Die Größe des Optionsfelds und des Texts ändert sich mit der Schriftgröße des Etiketts.

Versuchen Sie diesen Code ... es kann das sein, wonach Sie genau suchen

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>