Переключить пространство границы кнопки

Между границей и фоном есть пространство, как показано на скриншоте. Это связано с радиусом границы и переполнением: скрыто. Если я удалю радиус границы везде, он работает нормально. Я хотел бы удалить этот интервал. Я тестировал его в Chrome и Firefox.

Артефакты границ переключателя экрана

Выделены артефакты границы переключателя экрана

Переключить пространство границы кнопки

.toggle {
  display: inline-block;
  position: relative;
  overflow: visible;
  height: auto;
  width: 100%;
  cursor: pointer;
}

.toggle input[type=checkbox]:checked + .input__row .toggle__container .toggle__track {
  border-color: #4680fe;
}
.toggle input[type=checkbox]:checked + .input__row .toggle__container .toggle__track .toggle__circle {
  transform: translate(0, 0);
}
.toggle input[type=checkbox]:checked + .input__row .toggle__container .toggle__track .toggle__handler {
  transition: left 250ms ease-in-out 50ms, right 250ms ease-in-out, background-color 250ms ease-in-out;
  left: 24px;
  right: 0;
  background-color: white;
}

.input--hidden {
  position: absolute;
  left: 0px;
  cursor: inherit;
  pointer-events: all;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 0px;
  margin: 0px;
}

.input__row {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

.toggle__container {
  display: flex;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}

.toggle__track {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  border-radius: 12px;
  transition: border 250ms 0ms linear;
  background-color: transparent;
  box-shadow: 0 1px 1px rgba(70, 128, 254, 0.1);
  border: 2px solid rgba(70, 128, 254, 0.4);
}

.toggle__circle {
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  transform: translate(-100%, 0);
  transition: transform 250ms 0ms cubic-bezier(0.165, 0.84, 0.44, 1);
  border-radius: 12px;
  background-color: #4680fe;
}

.toggle__container,
.toggle__circle {
  width: 48px;
  height: 24px;
}

.toggle__handler {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  margin: 2px;
  right: 24px;
  transition: left 250ms ease-in-out, right 250ms ease-in-out 50ms, background-color 250ms ease-in-out;
  border-radius: 8px;
  background-color: #4680fe;
  box-shadow: 0 3px 6px rgba(70, 128, 254, 0.5);
}

<div class = "toggle toggle--checked">
  <input type = "checkbox" class = "input--hidden" checked>
  <div class = "input__row">
    <div class = "toggle__container">
      <div class = "toggle__track">
        <span class = "toggle__circle"></span>
        <div class = "toggle__handler"></div>
      </div>
    </div>
  </div>
</div>
</div>

цвет фона: #4680FE; вместо прозрачного обрабатывает артефакты, но теперь точка исчезает

— 06.06.2019 07:57

html css sass overflow toggle

06.06.2019 07:48

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Измените цвет фона .toggle__track #4680fe и .toggle__handler #ffffff

.toggle {
  display: inline-block;
  position: relative;
  overflow: visible;
  height: auto;
  width: 100%;
  cursor: pointer;
}

.toggle input[type=checkbox]:checked + .input__row .toggle__container .toggle__track {
  border-color: #4680fe;
}
.toggle input[type=checkbox]:checked + .input__row .toggle__container .toggle__track .toggle__circle {
  transform: translate(0, 0);
}
.toggle input[type=checkbox]:checked + .input__row .toggle__container .toggle__track .toggle__handler {
  transition: left 250ms ease-in-out 50ms, right 250ms ease-in-out, background-color 250ms ease-in-out;
  left: 24px;
  right: 0;
  background-color: white;
}

.input--hidden {
  position: absolute;
  left: 0px;
  cursor: inherit;
  pointer-events: all;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 0px;
  margin: 0px;
}

.input__row {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

.toggle__container {
  display: flex;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}

.toggle__track {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  border-radius: 12px;
  transition: border 250ms 0ms linear;
  background-color: #4680fe;
  box-shadow: 0 1px 1px rgba(70, 128, 254, 0.1);
  border: 2px solid rgba(70, 128, 254, 0.4);
}

.toggle__circle {
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  transform: translate(-100%, 0);
  transition: transform 250ms 0ms cubic-bezier(0.165, 0.84, 0.44, 1);
  border-radius: 12px;
  background-color: #4680fe;
}

.toggle__container,
.toggle__circle {
  width: 48px;
  height: 24px;
}

.toggle__handler {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  margin: 2px;
  right: 24px;
  transition: left 250ms ease-in-out, right 250ms ease-in-out 50ms, background-color 250ms ease-in-out;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 3px 6px rgba(70, 128, 254, 0.5);
}

<div class = "toggle toggle--checked">
  <input type = "checkbox" class = "input--hidden" checked>
  <div class = "input__row">
    <div class = "toggle__container">
      <div class = "toggle__track">
        <span class = "toggle__circle"></span>
        <div class = "toggle__handler"></div>
      </div>
    </div>
  </div>
</div>
</div>

Это заставляет анимацию вести себя по-разному. Я хотел бы избежать использования сплошного фона. Также я не хочу иметь фон #fff - мне нужно, чтобы он был прозрачным.

— 06.06.2019 08:25

06.06.2019 08:19

Ответ принят как подходящий

Добавление background-color для .toggle input[type=checkbox]:checked + .input__row .toggle__container .toggle__track должно решить проблему с зазором, не изменяя ваш эффект, насколько это возможно.

.toggle {
  display: inline-block;
  position: relative;
  overflow: visible;
  height: auto;
  width: 100%;
  cursor: pointer;
}

.toggle input[type=checkbox]:checked + .input__row .toggle__container .toggle__track {
  border-color: #4680fe;
  background-color: #4680fe;
  transition: background-color 250ms ease;
}
.toggle input[type=checkbox]:checked + .input__row .toggle__container .toggle__track .toggle__circle {
  transform: translate(0, 0);
}
.toggle input[type=checkbox]:checked + .input__row .toggle__container .toggle__track .toggle__handler {
  transition: left 250ms ease-in-out 50ms, right 250ms ease-in-out, background-color 250ms ease-in-out;
  left: 24px;
  right: 0;
  background-color: white;
}

.input--hidden {
  position: absolute;
  left: 0px;
  cursor: inherit;
  pointer-events: all;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 0px;
  margin: 0px;
}

.input__row {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

.toggle__container {
  display: flex;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}

.toggle__track {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  border-radius: 12px;
  transition: border 250ms 0ms linear;
  background-color: transparent;
  box-shadow: 0 1px 1px rgba(70, 128, 254, 0.1);
  border: 2px solid rgba(70, 128, 254, 0.4);
}

.toggle__circle {
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  transform: translate(-100%, 0);
  transition: transform 250ms 0ms cubic-bezier(0.165, 0.84, 0.44, 1);
  border-radius: 12px;
  background-color: #4680fe;
}

.toggle__container,
.toggle__circle {
  width: 48px;
  height: 24px;
}

.toggle__handler {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  margin: 2px;
  right: 24px;
  transition: left 250ms ease-in-out, right 250ms ease-in-out 50ms, background-color 250ms ease-in-out;
  border-radius: 8px;
  background-color: #4680fe;
  box-shadow: 0 3px 6px rgba(70, 128, 254, 0.5);
}

<div class = "toggle toggle--checked">
  <input type = "checkbox" class = "input--hidden" checked>
  <div class = "input__row">
    <div class = "toggle__container">
      <div class = "toggle__track">
        <span class = "toggle__circle"></span>
        <div class = "toggle__handler"></div>
      </div>
    </div>
  </div>
</div>

06.06.2019 08:38

Другие вопросы по теме

Изменить свойства div внутри определенного div

Как вертикально выровнять поля ввода с разной длиной меток в bootstrap 4.3.1?

Как получить текущую позицию мыши на фиксированном (прокручиваемом) div?

Текст размещается слева при выравнивании с изображением

Vuetify - карта Hover для расширения: размер других карт не изменяется

Как изменить цвет счетчиков Bootstrap на другие утилиты, кроме текстовых?

Неправильный scrollWidth для дочернего элемента гибкого контейнера

Как создать сетку 2 x 2 с помощью NativeScript GridLayout

Как мне не иметь длинного списка html в URL-адресе при реализации панели навигации?

Как изменить мой целевой <div> на другой с помощью CSS или jQuery

Переключить пространство границы кнопки

Ответы 2

Другие вопросы по теме

Похожие вопросы