So lassen Sie ein Optionsfeld wie ein Umschaltfeld aussehen

73

Ich möchte, dass eine Gruppe von Optionsfeldern wie eine Gruppe von Umschalttasten aussieht (aber immer noch wie Optionsfelder funktioniert). Es ist nicht erforderlich, dass sie genau wie Schaltflächen aussehen.

Wie kann ich das nur mit CSS und HTML machen?

BEARBEITEN: Ich werde zufrieden sein, den kleinen Kreis verschwinden zu lassen und den Stil zu ändern, wenn die Schaltfläche aktiviert / deaktiviert ist.

html css radio-button radiobuttonlist togglebutton Pomber
quelle
Die Optionsfelder für das AFAIK-Styling sind sehr begrenzt. Sie müssen wahrscheinlich JavaScript verwenden, um dies zu erreichen.
Andrew Whitaker
1
wenn Sie bereit sind , außerhalb der CSS gehen / html req: awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html
Robot Woods
Werfen

Antworten:

117

Je nachdem, welche Browser Sie unterstützen möchten, können Sie zusätzlich zum Ausblenden der Optionsfelder den :checkedPseudoklassen- Selektor verwenden.

Verwenden dieses HTML:

<input type="radio" id="toggle-on" name="toggle" checked
><label for="toggle-on">On</label
><input type="radio" id="toggle-off" name="toggle"
><label for="toggle-off">Off</label>

Sie könnten so etwas wie das folgende CSS verwenden:

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

input[type="radio"].toggle:checked + label {
  /* Do something special with the selected state */
}

Wenn Sie beispielsweise Bootstrap verwenden (um das benutzerdefinierte CSS kurz zu halten) , können Sie class="btn"Ihre <label>Elemente ergänzen und entsprechend formatieren, um einen Umschalter zu erstellen, der wie folgt aussieht:

Bootstrap-gestützter Funkumschalter

... was nur das folgende zusätzliche CSS erfordert:

input[type="radio"].toggle:checked + label {
  background-image: linear-gradient(to top,#969696,#727272);
  box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),
                    0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: default;
  color: #E6E6E6;
  border-color: transparent;
  text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);
}

input[type="radio"].toggle + label {
  width: 3em;
}

input[type="radio"].toggle:checked + label.btn:hover {
  background-color: inherit;
  background-position: 0 0;
  transition: none;
}

input[type="radio"].toggle-left + label {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

input[type="radio"].toggle-right + label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

Ich habe dies sowie die zusätzlichen Fallback-Stile in ein Optionsfeld zum Umschalten der jsFiddle-Demo aufgenommen . Beachten Sie, dass dies :checkednur in IE 9 unterstützt wird, sodass dieser Ansatz auf neuere Browser beschränkt ist.

Wenn Sie jedoch IE 8 unterstützen müssen und bereit sind, auf JavaScript * zurückzugreifen, können Sie die Pseudo-Unterstützung :checkedohne allzu große Schwierigkeiten hacken (obwohl Sie an dieser Stelle genauso einfach Klassen direkt auf dem Etikett festlegen können).

Verwenden Sie einen schnellen und schmutzigen jQuery-Code als Beispiel für die Problemumgehung :

$('.no-checkedselector').on('change', 'input[type="radio"].toggle', function () {
    if (this.checked) {
        $('input[name="' + this.name + '"].checked').removeClass('checked');
        $(this).addClass('checked');
        // Force IE 8 to update the sibling selector immediately by
        // toggling a class on a parent element
        $('.toggle-container').addClass('xyz').removeClass('xyz');
    }
});
$('.no-checkedselector input[type="radio"].toggle:checked').addClass('checked');

Sie können dann einige Änderungen am CSS vornehmen, um die Dinge zu vervollständigen:

input[type="radio"].toggle {
  /* IE 8 doesn't seem to like to update radio buttons that are display:none */
  position: absolute;
  left: -99em;
}

input[type="radio"].toggle:checked + label,
input[type="radio"].toggle.checked + label {
  /* Do something special with the selected state */
}

* Wenn Sie Modernizr verwenden, können Sie mithilfe des :selectorTests feststellen, ob Sie den Fallback benötigen. Ich habe meinen Test im Beispielcode "checkedselector" genannt, und der jQuery-Ereignishandler wird anschließend nur eingerichtet, wenn der Test fehlschlägt.

Tim Stone
quelle
Ausgezeichnet. Vielen Dank für Ihre tollen Tipps +1
Khanh Tran
62

Hier ist meine Version dieses netten CSS-Lösungsbeispiels von JS Fiddle, das oben veröffentlicht wurde.

http://jsfiddle.net/496c9/

HTML

<div id="donate">
    <label class="blue"><input type="radio" name="toggle"><span>$20</span></label>
    <label class="green"><input type="radio" name="toggle"><span>$50</span></label>
    <label class="yellow"><input type="radio" name="toggle"><span>$100</span></label>
    <label class="pink"><input type="radio" name="toggle"><span>$500</span></label>
    <label class="purple"><input type="radio" name="toggle"><span>$1000</span></label>
</div>

CSS

body {
    font-family:sans-serif;
}

#donate {
    margin:4px;

    float:left;
}

#donate label {
    float:left;
    width:170px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;

}

#donate label span {
    text-align:center;
    font-size: 32px;
    padding:13px 0px;
    display:block;
}

#donate label input {
    position:absolute;
    top:-20px;
}

#donate input:checked + span {
    background-color:#404040;
    color:#F7F7F7;
}

#donate .yellow {
    background-color:#FFCC00;
    color:#333;
}

#donate .blue {
    background-color:#00BFFF;
    color:#333;
}

#donate .pink {
    background-color:#FF99FF;
    color:#333;
}

#donate .green {
    background-color:#A3D900;
    color:#333;
}
#donate .purple {
    background-color:#B399FF;
    color:#333;
}

Gestylt mit farbigen Knöpfen :)

Simon Darby
quelle
Genau das habe ich gesucht. Vielen Dank!
Patrick E.
Ich habe versucht, Ihren Code zu verwenden. Der Fensterlauf geht nach oben, wenn auf eine untere Schaltfläche geklickt wird, z. B. jsfiddle.net/496c9/764. Kann etwas dagegen unternommen werden?
Puneet
Puneet - Überprüfen Sie dies für eine mögliche Antwort ... stackoverflow.com/questions/3252730/…
Simon Darby
Um das Bildlaufproblem zu vermeiden, fügen Sie Folgendes zu "#donate label" hinzu - display: block; position: relative; overflow: hidden;
Co7e
2
alt, aber es scheint, dass visibility:hiddendas offscreen hackie anstelle von `top: -20px;` dovisibility:hidden
Eiche
24

REINES CSS UND HTML (wie gefragt) mit ANIMATIONEN!

Beispielbild ( Sie können den folgenden Code ausführen ):

Schaltflächen (Radio und Kontrollkästchen) in reinem CSS und HTML umschalten

Nachdem ich nach etwas wirklich Sauberem und Unkompliziertem gesucht hatte , baute ich dies mit EINER einfachen Änderung von einem anderen Code auf , der nur an Kontrollkästchen gedacht war. Also habe ich die Funktionalität für RADIOS ausprobiert und es hat auch funktioniert (!).

Das CSS (SCSS) stammt vollständig von @mallendeo (wie in den JS-Credits angegeben). Ich habe einfach den Typ der Eingabe in RADIO geändert und allen Funkschaltern den gleichen Namen gegeben ... und VOILA! ! Sie deaktivieren sich automatisch gegenseitig !!

Sehr sauber und wie Sie gefragt haben, ist es nur CSS und HTML!

Es ist genau das, wonach ich seit 3 ​​Tagen gesucht habe, nachdem ich mehr als ein Dutzend Optionen ausprobiert und bearbeitet hatte (die meistens jQuery erforderten oder keine Beschriftungen zuließen oder sogar nicht wirklich mit aktuellen Browsern kompatibel waren). Dieser hat alles!

Ich bin verpflichtet, den Code hier einzufügen, damit Sie ein funktionierendes Beispiel sehen können, also:

Code-Snippet anzeigen

Wenn Sie das Snippet ausführen, wird das iOS-Radio aktiviert und deaktiviert, sodass Sie sehen können, wie es auch beim Aktivieren eines anderen Snippets beeinflusst wird. Ich habe auch 2 Etiketten für jedes Radio beigefügt, eines vor und eines nach. Die Kopie des Originalcodes zur Anzeige der funktionierenden Kontrollkästchen im selben Fenster ist ebenfalls enthalten.

DavidTaubmann
quelle
3
Beeindruckt bin ich. Konzentriere dich. :)
rmcsharry
17

Hier ist die Lösung, die für alle Browser funktioniert (auch IE7 und IE8; nicht auf IE6 geprüft):

http://jsfiddle.net/RkvAP/230/

HTML

<div class="toggle">
    <label><input type="radio" name="toggle"><span>On</span></label>    
</div>
<div class="toggle">
    <label><input type="radio" name="toggle"><span>Off</span></label>
</div>

JS

$('label').click(function(){
    $(this).children('span').addClass('input-checked');
    $(this).parent('.toggle').siblings('.toggle').children('label').children('span').removeClass('input-checked');
});

CSS

body {
    font-family:sans-serif;
}

.toggle {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

.toggle label {
    float:left;
    width:2.0em;
}

.toggle label span {
    text-align:center;
    padding:3px 0px;
    display:block;
    cursor: pointer;
}

.toggle label input {
    position:absolute;
    top:-20px;
}

.toggle .input-checked /*, .bounds input:checked + span works for firefox and ie9 but breaks js for ie8(ONLY) */ {
    background-color:#404040;
    color:#F7F7F7;
}

Verwendet minimales JS (jQuery, zwei Zeilen).

Michal B.
quelle
minus eins, weil Frage klar angegeben: nur CSS und HTML
DavidTaubmann
sieht so aus, als ob dies .toggle label inputin Chrome auch funktioniert .toggle label input { display:none }
Mobigital
Die Lösung wurde entwickelt, um IE8 und IE7 zu unterstützen. Das ist jetzt wohl nicht nötig :-)
Michal B.
2

Inspiriert von Michal B. Antwort. Wenn Sie Bootstrap verwenden ..

label.btn {
  padding: 0;
}

label.btn input {
  opacity: 0;
  position: absolute;
}

label.btn span {
  text-align: center;
  padding: 6px 12px;
  display: block;
}

label.btn input:checked+span {
  background-color: rgb(80, 110, 228);
  color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div>
  <label class="btn btn-outline-primary"><input type="radio" name="toggle"><span>One</span></label>
  <label class="btn btn-outline-primary"><input type="radio" name="toggle"><span>Two</span></label>
  <label class="btn btn-outline-primary"><input type="radio" name="toggle"><span>Three</span></label>
</div>
Erweitern Sie das Snippet

donatso
quelle
1

Normalerweise verstecke ich die realen Optionsfelder mit CSS (oder mache sie zu einzelnen versteckten Eingaben), füge die gewünschten Bilder ein (Sie könnten eine ungeordnete Liste verwenden und Ihre Stile auf das li-Element anwenden) und verwende dann Klickereignisse, um die Eingaben umzuschalten . Dieser Ansatz bedeutet auch, dass Sie die Dinge für Benutzer zugänglich halten können, die keinen normalen Webbrowser verwenden. Verstecken Sie einfach Ihre ul standardmäßig und zeigen Sie die Optionsfelder an.

Tom
quelle
0

Ich weiß, dass dies eine alte Frage ist, aber da ich nur danach suchte, dachte ich, ich würde posten, was ich am Ende hatte. Da ich Bootstrap verwende, habe ich mich für eine Bootstrap-Option entschieden.

HTML

<div class="col-xs-12">
    <div class="form-group">
        <asp:HiddenField ID="hidType" runat="server" />
        <div class="btn-group" role="group" aria-label="Selection type" id="divType">
            <button type="button" class="btn btn-default BtnType" data-value="1">Food</button>                        
            <button type="button" class="btn btn-default BtnType" data-value="2">Drink</button>
        </div>
    </div>
</div>

jQuery

$(document).ready(function () {
    $('#divType button').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        $('#<%= hidType.ClientID%>').val($(this).data('value'));
        //alert($(this).data('value'));             
    });
});

Ich habe mich dafür entschieden, den Wert in einem versteckten Feld zu speichern, damit ich den Wert leicht serverseitig abrufen kann.

Justin Tolchin
quelle
-2 

$(document).ready(function () {
    $('#divType button').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        $('#<%= hidType.ClientID%>').val($(this).data('value'));
        //alert($(this).data('value'));             
    });
});
<div class="col-xs-12">
    <div class="form-group">
        <asp:HiddenField ID="hidType" runat="server" />
        <div class="btn-group" role="group" aria-label="Selection type" id="divType">
            <button type="button" class="btn btn-default BtnType" data-value="1">Food</button>                        
            <button type="button" class="btn btn-default BtnType" data-value="2">Drink</button>
        </div>
    </div>
</div>
Erweitern Sie das Snippet

Kavyansh Khaitan
quelle
Hallo und willkommen bei SO. Ihre Antwort auf eine Frage, die fast 10 Jahre alt ist. Außerdem scheint Ihre Antwort eine C & P-Antwort mit unnötigen Zeilen für das Problem zu sein. Dann erfüllt es nicht das, was das OP tatsächlich will (Sie verklagen keine Optionsfelder, für die Sie übrigens überhaupt kein JS benötigen). Zu guter Letzt sollten Sie wissen, dass Ihr Snippet bereits einen JS-Parsing-Fehler ausgibt. Als solches betrachte ich Ihre Antwort als "minderwertig" und als Spam.
Tacoshy
-4

HTML:

<div>
    <label> <input type="radio" name="toggle"> On </label>
    <label> Off <input type="radio" name="toggle"> </label>
</div>

CSS:

div { overflow:auto; border:1px solid #ccc; width:100px; }
label { float:left; padding:3px 0; width:50px; text-align:center; }
input { vertical-align:-2px; }

Live-Demo: http://jsfiddle.net/scymE/1/

Šime Vidas
quelle
Dies lässt den kleinen Kreis überhaupt nicht verschwinden und beantwortet daher die Frage nicht
John Deverall