webentwicklung-frage-antwort-db.com.de

So lassen Sie ein Optionsfeld wie ein Umschaltfeld aussehen

Ich möchte, dass eine Gruppe von Optionsfeldern wie eine Gruppe von Umschaltfeldern 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 bin zufrieden, den kleinen Kreis verschwinden zu lassen und den Stil zu ändern, wenn die Schaltfläche aktiviert/deaktiviert ist.

69
Pomber

Abhängig davon, welche Browser Sie unterstützen möchten, können Sie zusätzlich zum Ausblenden der Optionsfelder den Selektor :checked - Pseudoklasse 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" Zu Ihren <label> - Elementen hinzufügen und sie entsprechend formatieren, um einen Umschalter zu erstellen das sieht aus wie:

Bootstrap-aided radio toggle

... 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 eine Optionsfeld zum Umschalten der jsFiddle-Demo aufgenommen. Beachten Sie, dass :checked Nur 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 für :checked Ohne allzu große Schwierigkeiten hacken (obwohl Sie dies können) Genauso einfach können Klassen direkt auf dem Etikett gesetzt werden.

Verwenden von schnellem und unsauberem jQuery-Code als ein 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 ein paar Ä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 mit dem :selector - Test 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.

114
Tim Stone

Hier ist meine Version der Nizza CSS-Lösung JS Fiddle Beispiel oben gepostet.

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;
}

Mit farbigen Knöpfen gestylt :)

60
Simon Darby

PURE CSS UND HTML (wie gewünscht) mit ANIMATIONEN!

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

Toggle Buttons (Radio and Checkbox) in Pure CSS and HTML

Nachdem ich nach etwas wirklich Sauberem und Geradlinigem gesucht hatte, baute ich es mit EINEM einfachen Wechsel von einem anderen Code , der nur an Kontrollkästchen gedacht war. Also habe ich die Funktionalität für RADIOS ausprobiert und es funktionierte auch (! ).

Das CSS (SCSS) stammt vollständig von @mallendeo (wie in den JS-Credits festgelegt). Ich habe lediglich den Typ des Eingangs in RADIO geändert und allen Funkschaltern den gleichen Namen gegeben .... und VOILA! ! Sie deaktivieren sich automatisch nacheinander !!

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 Labels zuließen oder sogar nicht wirklich mit aktuellen Browsern kompatibel waren). Dieser hat alles!

Ich bin verpflichtet, den Code hier einzuschließen, damit Sie ein funktionierendes Beispiel sehen können.

/** Toggle buttons
 * @mallendeo
 * forked @davidtaubmann
 * from https://codepen.io/mallendeo/pen/eLIiG
 */
html, body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: sans-serif;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tg-list {
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.tg-list-item {
  margin: 0 10px;;
}

h2 {
  color: #777;
}

h4 {
  color: #999;
}

.tgl {
  display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-light + .tgl-btn {
  background: #f0f0f0;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}
.tgl-light + .tgl-btn:after {
  border-radius: 50%;
  background: #fff;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}
.tgl-light:checked + .tgl-btn {
  background: #9FD6AE;
}

.tgl-ios + .tgl-btn {
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.tgl-ios + .tgl-btn:after {
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}
.tgl-ios + .tgl-btn:hover:after {
  will-change: padding;
}
.tgl-ios + .tgl-btn:active {
  box-shadow: inset 0 0 0 2em #e8eae9;
}
.tgl-ios + .tgl-btn:active:after {
  padding-right: .8em;
}
.tgl-ios:checked + .tgl-btn {
  background: #86d993;
}
.tgl-ios:checked + .tgl-btn:active {
  box-shadow: none;
}
.tgl-ios:checked + .tgl-btn:active:after {
  margin-left: -.8em;
}

.tgl-skewed + .tgl-btn {
  overflow: hidden;
  -webkit-transform: skew(-10deg);
          transform: skew(-10deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  font-family: sans-serif;
  background: #888;
}
.tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before {
  -webkit-transform: skew(10deg);
          transform: skew(10deg);
  display: inline-block;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.tgl-skewed + .tgl-btn:after {
  left: 100%;
  content: attr(data-tg-on);
}
.tgl-skewed + .tgl-btn:before {
  left: 0;
  content: attr(data-tg-off);
}
.tgl-skewed + .tgl-btn:active {
  background: #888;
}
.tgl-skewed + .tgl-btn:active:before {
  left: -10%;
}
.tgl-skewed:checked + .tgl-btn {
  background: #86d993;
}
.tgl-skewed:checked + .tgl-btn:before {
  left: -100%;
}
.tgl-skewed:checked + .tgl-btn:after {
  left: 0;
}
.tgl-skewed:checked + .tgl-btn:active:after {
  left: 10%;
}

.tgl-flat + .tgl-btn {
  padding: 2px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  background: #fff;
  border: 4px solid #f2f2f2;
  border-radius: 2em;
}
.tgl-flat + .tgl-btn:after {
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  background: #f2f2f2;
  content: "";
  border-radius: 1em;
}
.tgl-flat:checked + .tgl-btn {
  border: 4px solid #7FC6A6;
}
.tgl-flat:checked + .tgl-btn:after {
  left: 50%;
  background: #7FC6A6;
}

.tgl-flip + .tgl-btn {
  padding: 2px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  font-family: sans-serif;
  -webkit-perspective: 100px;
          perspective: 100px;
}
.tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before {
  display: inline-block;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 4px;
}
.tgl-flip + .tgl-btn:after {
  content: attr(data-tg-on);
  background: #02C66F;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.tgl-flip + .tgl-btn:before {
  background: #FF3A19;
  content: attr(data-tg-off);
}
.tgl-flip + .tgl-btn:active:before {
  -webkit-transform: rotateY(-20deg);
          transform: rotateY(-20deg);
}
.tgl-flip:checked + .tgl-btn:before {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.tgl-flip:checked + .tgl-btn:after {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
  left: 0;
  background: #7FC6A6;
}
.tgl-flip:checked + .tgl-btn:active:after {
  -webkit-transform: rotateY(20deg);
          transform: rotateY(20deg);
}
<h2>Toggle 'em</h2>
<ul class='tg-list'>
  <li class='tg-list-item'>
    <h3>Radios:</h3>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='rd1'>
      <h4>Light</h4>
    </label>
    <input class='tgl tgl-light' id='rd1' name='group' type='radio'>
    <label class='tgl-btn' for='rd1'></label>
    <label class='tgl-btn' for='rd1'>
      <h4>Light</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='rd2'>
      <h4>iOS 7 (Disabled)</h4>
    </label>
    <input checked class='tgl tgl-ios' disabled id='rd2' name='group' type='radio'>
    <label class='tgl-btn' for='rd2'></label>
    <label class='tgl-btn' for='rd2'>
      <h4>iOS 7 (Disabled)</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='rd3'>
      <h4>Skewed</h4>
    </label>
    <input class='tgl tgl-skewed' id='rd3' name='group' type='radio'>
    <label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='rd3'></label>
    <label class='tgl-btn' for='rd3'>
      <h4>Skewed</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='rd4'>
      <h4>Flat</h4>
    </label>
    <input class='tgl tgl-flat' id='rd4' name='group' type='radio'>
    <label class='tgl-btn' for='rd4'></label>
    <label class='tgl-btn' for='rd4'>
      <h4>Flat</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='rd5'>
      <h4>Flip</h4>
    </label>
    <input class='tgl tgl-flip' id='rd5' name='group' type='radio'>
    <label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='rd5'></label>
    <label class='tgl-btn' for='rd5'>
      <h4>Flip</h4>
    </label>
  </li>
</ul>
<ul class='tg-list'>
  <li class='tg-list-item'>
    <h3>Checkboxes:</h3>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='cb1'>
      <h4>Light</h4>
    </label>
    <input class='tgl tgl-light' id='cb1' type='checkbox'>
    <label class='tgl-btn' for='cb1'></label>
    <label class='tgl-btn' for='cb1'>
      <h4>Light</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='cb2'>
      <h4>iOS 7</h4>
    </label>
    <input class='tgl tgl-ios' id='cb2' type='checkbox'>
    <label class='tgl-btn' for='cb2'></label>
    <label class='tgl-btn' for='cb2'>
      <h4>iOS 7</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='cb3'>
      <h4>Skewed</h4>
    </label>
    <input class='tgl tgl-skewed' id='cb3' type='checkbox'>
    <label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='cb3'></label>
    <label class='tgl-btn' for='cb3'>
      <h4>Skewed</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='cb4'>
      <h4>Flat</h4>
    </label>
    <input class='tgl tgl-flat' id='cb4' type='checkbox'>
    <label class='tgl-btn' for='cb4'></label>
    <label class='tgl-btn' for='cb4'>
      <h4>Flat</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='cb5'>
      <h4>Flip</h4>
    </label>
    <input class='tgl tgl-flip' id='cb5' type='checkbox'>
    <label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='cb5'></label>
    <label class='tgl-btn' for='cb5'>
      <h4>Flip</h4>
    </label>
  </li>
</ul>

Wenn Sie das Snippet ausführen, wird angezeigt, dass das iOS-Radio aktiviert und deaktiviert ist, sodass Sie sehen können, wie es auch bei der Aktivierung eines anderen davon betroffen ist. Ich habe auch 2 Etiketten für jedes Radio beigelegt, eines davor und eines danach. Die Kopie des Originalcodes zur Anzeige der aktiven Kontrollkästchen im selben Fenster ist ebenfalls enthalten.

18
DavidTaubmann

Hier ist die Lösung, die für alle Browser funktioniert (auch IE7 und IE8; habe nicht nach IE6 gesucht):

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 minimale JS (jQuery, zwei Zeilen).

17
Michal B.

Normalerweise verstecke ich die echten Optionsfelder mit CSS (oder mache sie zu einzelnen versteckten Eingaben), gebe 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 Dinge für Benutzer zugänglich halten können, die nicht in einem normalen Webbrowser arbeiten.

1
Tom

Ich weiß, dass dies eine alte Frage ist, aber da ich dies nur wollte, dachte ich, ich würde posten, was ich am Ende hatte. Da ich Bootstrap verwende, habe ich die Option Bootstrap gewählt.

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.

0
Justin Tolchin