Single select button group space issue and box-shadow not working in safari browser

问题

I have created single select button group using radio button with label tag using css display: table and table-cell for text content exceed or overflow in each button. It's working fine all browsers (Chrome, Firefox & IE) expect Safari browser.

I am getting space between each button. I have tried some hacks and online solutions but i am not able to find/fix proper solution.

screen shot:

HTML Code:

<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 Code:

.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

And box-shadow is not working in safari browser.

回答1:

I have found solution, have created media query specifically for safari browser and in that defined display: flex. it's working fine.

For other browsers it will take it as display: table and table-cell and for Safari browser it will take it display: flex. It's kind of Hack but anyway it's working.

JSFiddle

来源：https://stackoverflow.com/questions/53226375/single-select-button-group-space-issue-and-box-shadow-not-working-in-safari-brow