22.09.2023 в 19:52

Полное руководство по CSS-переключателям с использованием CSS

Привет всем! Когда речь заходит о коммутаторах, большинство людей обращается к современным библиотекам, но создание ядра также имеет большое значение.

Создавать переключатели очень просто. Сегодня я расскажу о том, как создать CSS-переключатели.

Мы рассмотрим:

Переключатели 2 состояний
Переключатели 2 состояний с пользовательскими иконками
Переключатели 3 состояний

Переключатели 2 состояний

Для создания переключателей необходим способ определения активных состояний. Если вы используете JavaScript, то есть много способов сделать это, динамически добавляя классы по щелчку мыши. Если речь идет о css, то есть один очень популярный способ - использование типа ввода checkbox. Он меняет свое состояние, и вы можете легко определить это состояние с помощью CSS.

Посмотрите на приведенную ниже html-структуру:

<div class="switch1-container">
      <h5> Simple two state switch</h5>
      <div class="switch1">
        <input type="checkbox" id="switch1-input"/>
        <label for="switch1-input"></label>
        <span class="switch-bg"></switch>
      </div>
</div>

Примечание: В данной html-структуре для придания bg переключателю я экспериментировал с отдельным спэном и использовал абсолютное позиционирование. Аналогичного поведения можно добиться, используя псевдоэлемент ::before.

Главное, что необходимо знать: для получения состояния включения переключателя мы можем использовать состояние checked элемента input.

Вы можете легко получить его на входе с помощью псевдокласса :checked.

Для стилизации CSS кнопки переключения нам необходимо использовать метку ввода. Хорошо, что при щелчке на метке происходит переключение состояния ввода. Поэтому скройте входные данные и оформите метку в виде красивого круга.

После того как вы создали точку b и круг, перемещайте круг вместе с bg, чтобы создать ощущение переключения. Для этого воспользуйтесь свойством transform. Используйте translateX для перемещения круга и добавьте transition на transform, чтобы сделать переход плавным.

Вот и всё!

Ваш коммутатор готов.

Посмотрите приведенный ниже Css, чтобы понять, что мы обсуждали.

Практические знания важнее.

*{
  margin:0;
  padding:0;
}
*,*::before,*::after{
  box-sizing:border-box;
}

:root{
    --clr-primary: #d9d9d9;
  --clr-secondary:#fafafa;
  --clr-clear:#ffffff;
  --clr-grey: #6d6d6d;
  --clr-dark:#1e1e1e;
  --ff-base:'Inter', sans-serif;
  --fw-regular: 400;
  --fs-200:0.875rem;
  --fs-300:1rem;
  --fs-400:1.125rem;
  --fs-500:1.375rem;
  --fs-600:1.75rem;
  --fs-700:3.25rem;

}
html{
  color-scheme: dark;
}
body{
  font-family: var(--ff-base);
  font-size: var(--fs-300);
  font-weight: var(--fw-regular);
}

.container{
  max-width:80%;
  margin: auto;
  height:100dvh;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
/*   justify-content:center; */
  padding: 4rem;
}

input{
  display:none;
  cursor: pointer;
}
label{
  cursor: pointer;
}

.switch1-container h5{
  margin-bottom: 1rem;
}
.switch1{
  position:relative;
  border-radius: 30px;
  width:6rem;
  height:2.5rem;
  background: #ccc;
  display:flex;
  align-items:center;
  transition: .3s background-color ease;
}
.switch-bg{
  background-color: #eceeef;
  position:absolute;
  top:4px;
  left:5px;
  width:90%;
  height:80%;
  border-radius:30px;
  transition: background-color .2s ease-out;
}


.switch1 label {
  background-color:white;
  border: 1px solid #bbb;
  display:inline-block;
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-block;
  vertical-align:bottom;
  margin:5px 8px;
  z-index:2;
  transition: transform .3s ease;

}
.switch1 input:checked + label{
  transform: translateX(56px);
}
.switch1 input:checked + label + .switch-bg {
  background-color: dodgerblue;
}

Переключатели 2 состояний с пользовательской иконкой

Добавить иконку в переключатели очень просто, для этого можно использовать различные способы. Я сделал это, используя только css, даже без дополнительного html. Я использовал fontawesome для прямого использования иконок в таблице стилей. Созданная мной иконка полезна при переключении между темным и ночным режимами.

Просто добавьте это в таблицу стилей и в html-файл.

HTML

<div class="switch2-container">
      <h5> Simple two state siwtch with custom icon</h5>
      <div class="switch2">
        <input type="checkbox" id="switch2-input"/>
        <label for="switch2-input"></label>
        <span class="switch-bg"></switch>
      </div>
    </div>

CSS


.switch2-container h5{
  margin-bottom: 1rem;
}
.switch2{
  position:relative;
  border-radius: 30px;
  width:6rem;
  height:2.5rem;
  background: #ccc;
  display:flex;
  align-items:center;
  transition: .3s background-color ease;
}
.switch2-bg{
  background-color: #eceeef;
  position:absolute;
  top:4px;
  left:5px;
  width:90%;
  height:80%;
  border-radius:30px;
  transition: background-color .2s ease-out;
}


.switch2 label {
/*   background-color:white; */
/*   border: 1px solid #bbb; */
  display:inline-block;
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-block;
  vertical-align:bottom;
  margin:3px 8px 0px;
  z-index:2;
  transition: transform .3s ease;

}
.switch2 input:checked + label{
  transform: translateX(56px);
}
.switch2 input:checked + label + .switch-bg {
  background-color: dodgerblue;
}

.switch2 label::before{
  font: var(--fa-font-solid);
  content: "\f185";
  color: gold;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 4px;
}
.switch2 input:checked + label::before{
  content: "\f186";
  color:gold;
  border: none;
}
.switch2 input:checked + label + .switch-bg{
  background: black;
}

Теперь третье - самое мощное.

Переключатели 3 состояний

В данном случае я использую тип ввода radios из-за одного хорошего поведения, которое заключается в том, что если у вас есть группа radio и каждый из элементов имеет одинаковое имя, то при выборе одного из них другой будет автоматически снят с выбора.

Я создал свою html-структуру следующим образом.

 <div class="switch3-container">
      <h5> Simple three state siwtch</h5>
      <div class="switch3">
        <input type="radio" id="switch3-radio1" name="radio"/>
        <label for="switch3-radio1">FrontEnd</label>

        <input type="radio" id="switch3-radio2" name="radio"/>
        <label for="switch3-radio2">BackEnd</label>

        <input type="radio" id="switch3-radio3" name="radio"/>
        <label for="switch3-radio3">FullStack</label>

      </div>
    </div>

Для этого я использовал три html-элемента с типом ввода radio.

Каждый из них имеет свой собственный лейбл для отображения текста.

Для выделения выбранного варианта я использовал псевдоэлемент ::before в .switch3.

Благодаря новому селектору :has в css это стало проще и чище, чем в html.

Посмотрите приведенный ниже css:

.switch3-container h5{
  margin-bottom: .7rem;
}
.switch3
{

  position: relative;
  height:50px;
  display:flex;
  justify-content:space-around;
}
.switch3 label{
  padding: 1rem;
  z-index:1;
}
.switch3::before{
  content: '';
  position: absolute;
  left:0;
  width: 34%;
  height: 100%;
  background: #14142a;
  border: 1px solid #fff;
  border-radius: 12px;
  opacity: .5;
  transition: .5s left ease;
}

.switch3:has(#switch3-radio1:checked)::before{
  left: 0%;
}
.switch3:has(#switch3-radio2:checked)::before{
  left: 33%;
}
.switch3:has(#switch3-radio3:checked)::before{
  left: 66%;
}

Вот как выглядят все три варианта:

Экспериментируйте с моим Codepen - Codepen Live

Аналогичным образом мы можем создать и 4-позиционный переключатель.

Если у вас возникли какие-либо сомнения или вопросы, не стесняйтесь обсуждать их в комментариях.

Есть лучший подход? Давайте обсудим!

Спасибо за прочтение!

Источник:

Comment button

#CSS #HTML

Войти на сайт

Полное руководство по CSS-переключателям с использованием CSS

Переключатели 2 состояний

Переключатели 2 состояний с пользовательской иконкой

Переключатели 3 состояний

Источник: