wake-up-neo.com

Radioknopf größer machen?

Gibt es eine Möglichkeit, ein Optionsfeld mithilfe von CSS zu vergrößern?

Wenn nicht, wie kann ich es sonst tun?

htmlcssbuttonradio-button
33
Latox

dieser Link kann Ihnen dabei helfen

http://www.thecssninja.com/css/custom-inputs-using-css

6
Bhanu Prakash Pandey

Versuchen Sie diesen Code:

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

63
Manish Patel

Sie können Höhe und Breite wie jedes Element einfach einstellen.

Hier ist die Geige mit Code

JSFIDDLE BIG RADIO-TASTE

HTML

<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>
<input id="r2" type="radio" name="group1" class="radio2" />
<label for="r2">label 2 text</label>
<input id="r3" type="radio" name="group1" class="radio3" />
<label for="r3">label 3 text</label>
<input id="r4" type="radio" name="group1" class="radio4" />
<label for="r4">label 4 text</label>

CSS

input[type=radio] {
    display: none;
}
input[type=radio] + label::before {
    content: '';
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
input[type=radio]:checked + label::before {
    background-color: #ffa;
}

.radio1 + label::before {
    width: 0.5em;
    height: 0.5em;
}

.radio2 + label::before {
    width: 0.75em;
    height: 0.75em;
}

.radio3 + label::before {
    width: 1em;
    height: 1em;
}

.radio4 + label::before {
    width: 1.5em;
    height: 1.5em;
}

Styling-Optionsfeld ist nicht einfach. 

Formularelemente sind im Allgemeinen entweder problematisch oder können mit CSS alone nicht formatiert werden.

Gehen Sie einfach durch diesen Link für Ihren eigenen Stil, mit einer größeren Größe für Optionsfelder.

Schauen Sie sich auch diesen Link an ...

Größere Optionsfelder

12
KesaVan

Sie können dies mit CSS tun, aber auch Browser und Betriebssystem wirken sich darauf aus. Schau dir folgenden Artikel an.

Optionsfelder mit CSS gestalten

2
Naveed

Versuche dies:

HTML

<label>
   <input type="radio" value="1">
   <div></div>
</label>

CSS

input[type="radio"] {
   display: none;
}

input[type="radio"] + div {
   height: 20px;
   width: 20px;
   display: inline-block;
   cursor: pointer;
   vertical-align: middle;
   background: #FFF;
   border: 1px solid #d2d2d2;
   border-radius: 100%;
}

input[type="radio"] + div:hover {
    border-color: #c2c2c2;
}

input[type="radio"]:checked + div {
    background:gray;
}

DEMO: http://jsfiddle.net/nuzhysgg/

1
Cas Bloem

Benutze nicht transform: scale(1.3), es sieht wirklich schrecklich aus. Benutze einfach folgendes:

input[type='radio'] {
    height: 15px
    width: 15px;
    vertical-align: middle;
}

...

<input type="radio">Select this item
0
Paul Kruger

In Radio-Elementen gibt es vielleicht ein paar schrullige <span>-Tricks, aber ich denke, es wäre ärgerlich, sie über verschiedene Browser zu debuggen.

Ich habe dieses Skript in der Vergangenheit verwendet, aber nicht in letzter Zeit.

0
Cole