Unable to put padding between border and content of a label-CodePudding

I have created labels as buttons for the radio buttons. Unable to find out why I cant put a padding between the border on the background color content.

Do I need to restructure the radio/label, or am I missing something that I can't put padding on the checked/hover labels?

.product-form__input input[type="radio"]   .color-swatch {
  border: 3px solid #f4f5ff;
  width: 35px;
  height: 35px;
  padding: 0;
}

.product-form__input input[type="radio"]:checked   .color-swatch,
.product-form__input input[type="radio"]:hover   .color-swatch {
  border: 3px solid #000000;
}

.product-form__input input[type=radio] label {
    border-radius: 4rem;
    display: inline-block;
}

<div >
  <input type="radio" id="template--14332506603656__main-Color-0" name="Color" value="BLACK">
  <label  for="template--14332506603656__main-Color-0" style="background-color: #ff0000"></label>
  <input type="radio" id="template--14332506603656__main-Color-1" name="Color" value="GREY" checked="">
  <label  for="template--14332506603656__main-Color-1" style="background-color: #a1a1a1"></label>
</div>

CodePudding user response：

background-color will color any padding as well.

Instead, you can use a background-image which is a radial gradient, the middle bit being the gray and the outer bit white:

.product-form__input input[type="radio"] .color-swatch {
  border: 3px solid #f4f5ff;
  width: 35px;
  height: 35px;
  padding: 0;
}

.product-form__input input[type="radio"]:checked .color-swatch,
.product-form__input input[type="radio"]:hover .color-swatch {
  border: 3px solid #000000;
}

.product-form__input input[type=radio] label {
  border-radius: 4rem;
  display: inline-block;
}

<div >
  <input type="radio" id="template--14332506603656__main-Color-0" name="Color" value="BLACK">
  <label  for="template--14332506603656__main-Color-0" style="background-color: #ff0000"></label>
  <input type="radio" id="template--14332506603656__main-Color-1" name="Color" value="GREY" checked="">
  <label  for="template--14332506603656__main-Color-1" style="background-image: radial-gradient(#a1a1a1 0 50%, white 20% 100%);"></label>
</div>

CodePudding user response：

You can not have space between background color and border of an element.

Maybe you can use :after to draw a larger circle and get some spacing.

.product-form__input input[type="radio"]   .color-swatch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 6px;
  border-radius: 50%;
}

label:after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: calc(100%   6px);
  height: calc(100%   6px);
  border: 3px solid #000000;
  border-radius: 50%;
}

input:not(:hover):not(:checked)   label:after {
  border-color: #f4f5ff;
}

<div >
  <input type="radio" id="template--14332506603656__main-Color-0" name="Color" value="BLACK">
  <label  for="template--14332506603656__main-Color-0" style="background-color: #ff0000"></label>
  <input type="radio" id="template--14332506603656__main-Color-1" name="Color" value="GREY" checked="">
  <label  for="template--14332506603656__main-Color-1" style="background-color: #a1a1a1"></label>
</div>

CodePudding user response：

Was able to answer my own question after more research, I used outline and offset-outline to solve the issue.

.product-form__input input[type="radio"]   .color-swatch {
  outline-offset: 3px;
  width: 30px;
  height: 30px;
  padding: 0;
}

.product-form__input input[type="radio"]:checked   .color-swatch,
.product-form__input input[type="radio"]:hover   .color-swatch {
  outline: 2px solid #000000;
}

.product-form__input input[type=radio] label {
    border-radius: 4rem;
    display: inline-block;
}

<div >
  <input type="radio" id="template--14332506603656__main-Color-0" name="Color" value="BLACK">
  <label  for="template--14332506603656__main-Color-0" style="background-color: #ff0000"></label>
  <input type="radio" id="template--14332506603656__main-Color-1" name="Color" value="GREY" checked="">
  <label  for="template--14332506603656__main-Color-1" style="background-color: #a1a1a1"></label>
</div>