Кнопка переключения Использование чистого CSS - PullRequest
Новая
       7

Кнопка переключения Использование чистого CSS

0 голосов
/ 11 сентября 2018

У меня есть кнопка переключения, которую я пытаюсь использовать с помощью флажка и чистого CSS. Конечный результат, который я пытаюсь получить, - что-то вроде этого https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch

Но, попробовав это из разных источников, я в итоге сделал что-то вроде этого

http://jsfiddle.net/8wb570ma/34/

.slide-btn-alt .slide-btn-content .slide-btn-handle {
  position: static;
  width: 50%;
  border-radius: 0;
  background: none;
  text-align: center;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу перевести направление, То, что я проверил в w3schools, показывает «Вкл. / Проверено» с текстом слева и ползунком справа, тогда как «Выкл.» / «Не проверено» с текстом справа и ползунком слева. В то время как то, что я закончил, показывает совершенно противоположное поведение.

Это потому, что моя кнопка похожа?

OFF || Handle || О

1 Ответ

0 голосов
/ 11 сентября 2018

Если я правильно понимаю, что вы хотите, то вы можете сделать с небольшим вариантом метода W3Schools.

Чтобы показать, что происходит, вот базовая версия с минимальными изменениями по сравнению с оригиналом: 

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: attr(data-off);
  line-height:26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  content: attr(data-on);
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
<label class="switch">
  <input type="checkbox">
  <span class="slider" data-off="Off" data-on="On"></span>
</label>

И еще немного CSS, чтобы он выглядел больше как ваш пример: 

.slide-btn-alt {
  position: relative;
  display: inline-block;
  width: 108px;
  height: 34px;
}

.slide-btn-alt input {display:none;}

.slide-btn-content {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2b99d6;
  text-transform:uppercase;
  -webkit-transition: .3s;
  transition: .3s;
}

.slide-btn-content::before {
  position: absolute;
  content: attr(data-off);
  font: 900 10px/34px 'Montserrat-Bold', sans-serif;
  color: white;
  width: 50%;
  left: 0;
  bottom: 0;
  text-align: center;
  -webkit-transition: .3s;
  transition: .3s;
}

.slide-btn-content::after {
  position: absolute; content: '';
  height: 34px;
  left: 49%;
  bottom: 0;
  border-left: 2px solid rgba(238, 238, 239, 0.2);
}

input:checked + .slide-btn-content {
  background-color: #485679;
}

input:focus + .slide-btn-content {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slide-btn-content::before {
  content: attr(data-on);
  -webkit-transform: translateX(54px);
  -ms-transform: translateX(54px);
  transform: translateX(54px);
}
<label class="slide-btn-alt">
  <input type="checkbox">
  <span class="slide-btn-content" data-off="Off" data-on="On"></span>
</label>
...