Verwenden Sie CSS3, um Code zu schreiben, der Kontrollkästchen und Schaltflächen mit Schaltern in iOS ähnelt

In diesem Artikel wird hauptsächlich die Verwendung von CSS3 zum Schreiben von Kontrollkästchen und Schaltflächen mit Schaltern vorgestellt, die denen in iOS ähneln. Freunde in Not können sich auf

Kontrollkästchen-Mehrfachauswahl

beziehen

Ich habe kürzlich ein Kontrollkästchen geschrieben, das für mobile Endgeräte geeignet ist, wie im Bild gezeigt:

ps: Das Kontrollkästchen in der Mitte ist Iconfont im iOS-Stil.

Spezifisches HTML:

<p class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox" type="checkbox">默认未选中</label>
</p>
<p class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox" type="checkbox" checked>默认选中</label>
</p>
<p class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orange</label>
</p>
<p class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-green" type="checkbox" checked>绿色 checkbox-green</label>
</p>
<p class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox" type="checkbox" disabled>禁用</label>
</p>

CSS-Code (von SCSS exportiert, das Layout ist etwas seltsam):

.mui-checkbox {   
  -webkit-appearance: none;   
  position: relative;   
  width: 25px;   
  height: 25px;   
  margin-right: 10px;   
  background-color: #FFFFFF;   
  border: solid 1px #d9d9d9;   
  border-top-left-radius: 20px;   
  border-top-rightright-radius: 20px;   
  border-bottom-left-radius: 20px;   
  border-bottom-rightright-radius: 20px;   
  background-clip: padding-box;   
  display: inline-block; }   
  .mui-checkbox:focus {   
    outline: 0 none;   
    outline-offset: -2px; }   
  .mui-checkbox:checked {   
    background-color: #18b4ed;   
    border: solid 1px #FFFFFF; }   
    .mui-checkbox:checked:before {   
      display: inline-block;   
      margin-top: 1px;   
      margin-left: 2px;   
      font-family: iconfont;   
      content: "\e667";   
      color: #FFFFFF;   
      font-size: 18px; }   
  .mui-checkbox:disabled {   
    background-color: #d9d9d9;   
    border: solid 1px #d9d9d9; }   
    .mui-checkbox:disabled:before {   
      display: inline-block;   
      margin-top: 1px;   
      margin-left: 2px;   
      font-family: iconfont;   
      content: "\e667";   
      color: #FFFFFF;   
      font-size: 18px; }   
  .mui-checkbox.checkbox-green:checked {   
    background-color: #5cb85c; }   
  .mui-checkbox.checkbox-orange:checked {   
    background-color: #f0ad4e; }   
  .mui-checkbox.checkbox-s {   
    width: 19px;   
    height: 19px; }   
    .mui-checkbox.checkbox-s:before {   
      display: inline-block;   
      margin-top: 1px;   
      margin-left: 2px;   
      font-family: iconfont;   
      content: "\e667";   
      color: #FFFFFF;   
      font-size: 13px; }   
.mui-checkbox-anim {   
  -webkit-transition: background-color ease 0.2s;   
          transition: background-color ease 0.2s; }

SCSS-Code:

@mixin checkedCon($fs:18px) {   
  &:before {   
    display: inline-block;   
    margin-top: 1px;   
    margin-left: 2px;   
    font-family: iconfont;   
    content: "\e667";   
    color: #FFFFFF;   
    font-size: $fs;   
  }   
}   
$duration: .4s;   
.mui-checkbox {   
  -webkit-appearance: none;   
  position: relative;   
  width: 25px;   
  height: 25px;   
  margin-right: 10px;   
  background-color: #FFFFFF;   
  border: solid 1px #d9d9d9;   
  border-top-left-radius: 20px;   
  border-top-rightright-radius: 20px;   
  border-bottom-left-radius: 20px;   
  border-bottom-rightright-radius: 20px;   
  background-clip: padding-box;   
  display: inline-block;   
  &:focus {   
    outline: 0 none;   
    outline-offset: -2px
  }   
  &:checked {   
    background-color: #18b4ed;   
    border: solid 1px #FFFFFF;   
    @include checkedCon();   
  }   
  &:disabled {   
    background-color: #d9d9d9;   
    border: solid 1px #d9d9d9;   
    @include checkedCon();   
  }   
  &.checkbox-green:checked {   
    background-color: #5cb85c;   
  }   
  &.checkbox-orange:checked {   
    background-color: #f0ad4e;   
  }   
  &.checkbox-s {   
    width: 19px;   
    height: 19px;   
    @include checkedCon(13px);   
  }   
}   
.mui-checkbox-anim{   
  //border等其他元素不做过渡效果，增加视觉差，更有动画效果   
  transition: background-color ease $duration/2;   
}

Mit switch switch
selbst Der Zweck dieser Benutzeroberfläche besteht darin, mobile Seiten zu unterstützen, und das Webkit unterstützt auch Eingabeelemente mit einem Tag unter Verwendung von Pseudoklassen (:before oder :after), also habe ich es nicht erstellt jegliche Änderungen. Viel Unterstützung und Optimierung, ich möchte nur den HTML-Code so sauber wie möglich halten, damit ich keine anderen Elemente für die Simulation verwende. Wenn Sie es in einer Desktop-Anwendung verwenden oder andere Browser unterstützen möchten, können Sie es selbst leicht modifizieren. Ich habe es sowieso nicht getestet.

Heute teile ich weiterhin eine Umschalttaste im iOS-Stil, die sehr häufig aussieht, wie im Bild gezeigt:

Verwendet hauptsächlich

<label><input class="mui-switch" type="checkbox"> 默认未选中</label>
<label><input class="mui-switch" type="checkbox" checked> 默认选中</label>
<label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label>
<label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
<label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中，过渡效果，加 mui-switch-anim   
类即可</label>
<label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>

Bei der tatsächlichen Verwendung wurden später zwei Übergangseffekte hinzugefügt, nämlich die Klassen mui-switch-animbg und mui-switch-anim. Überprüfen Sie die spezifischen Effekte. Die Demoseite unten.

CSS-Code (von SCSS exportiert, das Layout ist etwas seltsam):

.mui-switch {   
  width: 52px;   
  height: 31px;   
  position: relative;   
  border: 1px solid #dfdfdf;   
  background-color: #fdfdfd;   
  box-shadow: #dfdfdf 0 0 0 0 inset;   
  border-radius: 20px;   
  border-top-left-radius: 20px;   
  border-top-rightright-radius: 20px;   
  border-bottom-left-radius: 20px;   
  border-bottom-rightright-radius: 20px;   
  background-clip: content-box;   
  display: inline-block;   
  -webkit-appearance: none;   
  user-select: none;   
  outline: none; }   
  .mui-switch:before {   
    content: '';   
    width: 29px;   
    height: 29px;   
    position: absolute;   
    top: 0px;   
    left: 0;   
    border-radius: 20px;   
    border-top-left-radius: 20px;   
    border-top-rightright-radius: 20px;   
    border-bottom-left-radius: 20px;   
    border-bottom-rightright-radius: 20px;   
    background-color: #fff;   
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }   
  .mui-switch:checked {   
    border-color: #64bd63;   
    box-shadow: #64bd63 0 0 0 16px inset;   
    background-color: #64bd63; }   
    .mui-switch:checked:before {   
      left: 21px; }   
  .mui-switch.mui-switch-animbg {   
    transition: background-color ease 0.4s; }   
    .mui-switch.mui-switch-animbg:before {   
      transition: left 0.3s; }   
    .mui-switch.mui-switch-animbg:checked {   
      box-shadow: #dfdfdf 0 0 0 0 inset;   
      background-color: #64bd63;   
      transition: border-color 0.4s, background-color ease 0.4s; }   
      .mui-switch.mui-switch-animbg:checked:before {   
        transition: left 0.3s; }   
  .mui-switch.mui-switch-anim {   
    transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; }   
    .mui-switch.mui-switch-anim:before {   
      transition: left 0.3s; }   
    .mui-switch.mui-switch-anim:checked {   
      box-shadow: #64bd63 0 0 0 16px inset;   
      background-color: #64bd63;   
      transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; }   
      .mui-switch.mui-switch-anim:checked:before {   
        transition: left 0.3s; }   
/*# sourceMappingURL=mui-switch.css.map */

SCSS-Code:

@mixin borderRadius($radius:20px) {   
  border-radius: $radius;   
  border-top-left-radius: $radius;   
  border-top-rightright-radius: $radius;   
  border-bottom-left-radius: $radius;   
  border-bottom-rightright-radius: $radius;   
}   
$duration: .4s;   
$checkedColor: #64bd63;   
.mui-switch {   
  width: 52px;   
  height: 31px;   
  position: relative;   
  border: 1px solid #dfdfdf;   
  background-color: #fdfdfd;   
  box-shadow: #dfdfdf 0 0 0 0 inset;   
  @include borderRadius();   
  background-clip: content-box;   
  display: inline-block;   
  -webkit-appearance: none;   
  user-select: none;   
  outline: none;   
  &:before {   
    content: '';   
    width: 29px;   
    height: 29px;   
    position: absolute;   
    top: 0px;   
    left: 0;   
    @include borderRadius();   
    background-color: #fff;   
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);   
  }   
  &:checked {   
    border-color: $checkedColor;   
    box-shadow: $checkedColor 0 0 0 16px inset;   
    background-color: $checkedColor;   
    &:before {   
      left: 21px;   
    }   
  }   
  &.mui-switch-animbg {   
    transition: background-color ease $duration;   
    &:before {   
      transition: left 0.3s;   
    }   
    &:checked {   
      box-shadow: #dfdfdf 0 0 0 0 inset;   
      background-color: $checkedColor;   
      transition: border-color $duration, background-color ease $duration;   
      &:before {   
        transition: left 0.3s;   
      }   
    }   
  }   
  &.mui-switch-anim {   
    transition: border cubic-bezier(0, 0, 0, 1) $duration, box-shadow cubic-bezier(0, 0, 0, 1) $duration;   
    &:before {   
      transition: left 0.3s;   
    }   
    &:checked {   
      box-shadow: $checkedColor 0 0 0 16px inset;   
      background-color: $checkedColor;   
      transition: border ease $duration, box-shadow ease $duration, background-color ease $duration*3;   
      &:before {   
        transition: left 0.3s;   
      }   
    }   
  }   
}

Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Analyse der Skalenskalierung in der CSS3-Transformation

Informationen zum Ändern von Listenattributen im Listenstil bei CSS-Problemen mit der Steuerung des Stils des li-Tags

Über den Code zur Verwendung von Ellipsen zum Ersetzen von CSS-Text, wenn dieser den div oder span überschreitet

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um Code zu schreiben, der Kontrollkästchen und Schaltflächen mit Schaltern in iOS ähnelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!