Проблема с групповым пространством одной кнопки выбора и тень окна не работает в браузере - PullRequest
Новая
       21

Проблема с групповым пространством одной кнопки выбора и тень окна не работает в браузере

0 голосов
/ 09 ноября 2018

Я создал одну группу кнопок выбора с помощью переключателя с тегом метки с использованием дисплея css: таблица и ячейка таблицы для текстового содержимого превышают или переполняют каждую кнопку.Он работает нормально, все браузеры (Chrome, Firefox и IE) ожидают браузер Safari.

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

снимок экрана:

Safari browser issue screen shot

HTML-код: 

<div class="selection-group">
  <span class="field-label" id="singlecard">Title field</span>
  <div class="single-select">
    <input name="single-select1" type="radio" id="card1" aria-describedby="singlecard">
    <label for="card1">Card 1</label>
    <input name="single-select1" type="radio" id="card2">
    <label for="card2">Card 2</label>
    <input name="single-select1" type="radio" id="card3">
    <label for="card3">Card 3</label>
    <input name="single-select1" type="radio" id="card4">
    <label for="card4">Card 4</label>
  </div>
</div>

Код CSS: 

.selection-group .single-select {
  display: table;
  font-size: 0;
}

.selection-group .field-label {
  font-size: 0.8125rem;
  color: #6c7378;
  display: block;
  margin-bottom: 0.75rem;
  line-height: 1.125rem;
}

.selection-group input {
  position: absolute;
  clip: rect(0,0,0,0);
  pointer-events: none;
  width: 0.0625rem;
  height: 0.0625rem;
}

.selection-group input + label {
  background-color: #ffffff;
  border: 0.0625rem solid #b7bcbf;
  color: #0070ba;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  padding: 0.75rem 1.5rem;
  text-align: center;
  cursor: pointer;
  display: table-cell;
  vertical-align: middle;
}

.selection-group input + label:focus {
  outline-offset: -0.1875rem;
}

.selection-group input:focus + label {
  position: relative;
  z-index: 1;
  -webkit-box-shadow: 0 0 0.375rem #3b99fc;
          box-shadow: 0 0 0.375rem #3b99fc;
  color: #0070ba;
}

.selection-group input:checked:focus + label {
  -webkit-box-shadow: 0 0 0 0.1875rem #009CDE;
          box-shadow: 0 0 0 0.1875rem #009CDE;
}

.selection-group input + label:hover {
  background-color: #e4f1fb;
}

.selection-group input:checked + label {
  background-color: #0070ba;
  color: #ffffff;
  border: 0.0625rem solid #0070ba;
  font-weight: 500;

}

.selection-group .single-select input + label:not(:last-of-type) {
  border-right: none;
}

.selection-group .single-select input + label:first-of-type {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.selection-group .single-select input + label:last-of-type {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

JSFiddle

Аbox-shadow не работает в браузере Safari.

1 Ответ

0 голосов
/ 22 ноября 2018

Я нашел решение, создал медиа-запрос специально для браузера Safari и на этом определенном дисплее: flex. работает нормально.

Для других браузеров он будет иметь значение display: table и table-cell, а для браузера Safari - «flex». Это вроде Hack, но в любом случае это работает.

JSFiddle

...