webentwicklung-frage-antwort-db.com.de

Wie kann ich die Größe des Optionsfelds mit CSS ändern?

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

74
Misha Moroshko

Ja, Sie sollten die Höhe und Breite wie bei jedem Element einstellen können. 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. http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Wie Sie sehen werden, ist die Auswahl des Optionsfelds nicht einfach :-D

Um dieses Problem zu beheben, verwenden Sie Javascript und CSS, um die Optionsfelder und anderen Formularelemente durch benutzerdefinierte Bilder zu ersetzen:
http://www.emblematiq.com/lab/niceforms/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
...

47
LapinLove404

Obwohl es eine alte Frage war, hatte es die meisten Stimmen zu diesem Thema. Ich habe eine andere Lösung, auf die ich kürzlich gestoßen bin. Diese CSS scheint den Trick zu tun.

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

Wenn Sie den Rahmen auf 0 setzen, scheint es dem Benutzer möglich zu sein, die Größe der Schaltfläche zu ändern. Mit der obigen Höhe: 2em wird die Schaltfläche mit der doppelten Zeilenhöhe dargestellt. Dies funktioniert auch für Kontrollkästchen (Eingabe [Typ = Kontrollkästchen]). Einige Browser werden besser dargestellt als andere.

Von einer Windows-Box aus funktioniert es in ie8 +, ff21 +, chrome29 +.

Prost.

30
user2745744

Alte Frage, aber jetzt gibt es eine einfache Lösung, die mit den meisten Browsern kompatibel ist, nämlich 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% in der Größe, je nach Ihren Bedürfnissen. Wenn das Verhältnis sehr hoch ist, kann das Optionsfeld verwischt werden. Das nächste Bild zeigt ein Verhältnis von 1,5.

 enter image description here

 enter image description here

Nicht direkt. In der Tat sind Formularelemente im Allgemeinen entweder problematisch oder nur mit CSS allein gestaltbar. Der beste Ansatz ist:

  1. verstecken Sie das Optionsfeld mit Javascript.
  2. Verwenden Sie Javascript zum Hinzufügen/Anzeigen von HTML, 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 "ausgewählten" Klasse zu Ihrer Spanne ausgelöst wird.
  4. Schreiben Sie abschließend Javascript, damit der Status des Optionsfelds auf Klicks auf die Spanne reagiert, und umgekehrt, um die Spanne zu veranlassen, auf Änderungen im Status des Optionsfelds zu reagieren (wenn Benutzer über die Tastatur auf das Formular zugreifen). Der zweite Teil davon kann schwierig sein, um mit allen Browsern arbeiten zu können. Ich verwende so etwas wie das Folgende (das auch jQuery verwendet. Ich vermeide es, zusätzliche Spannweiten hinzuzufügen, indem ich die "ausgewählte" Klasse direkt auf die Eingabe-Labels stelle und anwendet).

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

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

 enter image description here


Chrome: 56.0.2924.87

 enter image description here


Firefox: 50.1.0

 enter image description here


Internet Explorer: 9 (Fuzziness nicht Schuld des IE, gehosteter Test auf netrenderer.com)

 enter image description here


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

Die Größenänderung des Standard-Widgets funktioniert nicht in allen Browsern. Sie können jedoch benutzerdefinierte Optionsfelder mit JavaScript erstellen. Sie können beispielsweise ausgeblendete Optionsfelder erstellen und dann Ihre eigenen Bilder auf Ihrer Seite platzieren. Wenn Sie auf diese Bilder klicken, werden die Bilder geändert (das angeklickte Bild wird durch ein Optionsfeld in einem ausgewählten Zustand durch ein Bild ersetzt und die anderen Bilder werden durch ein Optionsfeld in einem nicht ausgewählten Zustand ersetzt) ​​und das neue Optionsfeld wird ausgewählt.

Auf jeden Fall gibt es eine Dokumentation zu diesem Thema. Lesen Sie beispielsweise Folgendes: Ankreuzfelder und Optionsfelder mit CSS und JavaScript gestalten .

3
Arseny

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;">
3
Tarik

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

Sie solltenimagesverwenden, um die Optionsfelder zu ersetzen. Sie können sie in den meisten Fällen auf die gleiche Weise wie die Radioknöpfe funktionieren lassen und sie in jede gewünschte Größe bringen.

1
Harry Joy

Das funktioniert für mich in allen Browsern:

(Inline-Stil der Einfachheit halber ...)

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

0
Ron Richardson

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

input[type=radio]{transform:scale(2);}
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>

0
Waruna Manjula