css 自定义复选框和单选按钮设置

Posted 2021-05-13

<form>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      <span class="checkmark-selection"></span>
      No
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      <span class="checkmark-selection"></span>
      Yes
    </label>
  </div>
  <hr>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      <span class="checkmark-selection"></span>
      Yes
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      <span class="checkmark-selection"></span>
      No
    </label>
  </div>
</form>

/* Bootstrap form styles
 * If you are already using bootstrap you don't need these */
.checkbox,
.radio {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}
.checkbox label,
.radio label {
  min-height: 20px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 25px;
  cursor: pointer;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

/* BEGIN ---------------------------
 * Radio/Check boxes design */
 
/* hide browser checkbox/radio inputs */
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  position: absolute;
  display: block;
  float: left;
  margin: 0px;
  width: 25px;
  height: 25px;
  opacity: 0;
  cursor: pointer;
}
/* Input selection design for `<span>` */
span.checkmark-selection {
  display: block;
  float: left;
  margin: 0px 20px 0px 0px;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 3px solid #ccc;
  border-radius: 50%;
}

/* When checked
/* --------------- */

/* BG Color for both radio and check box */
input:checked + .checkmark-selection {
  background: green;
  border: 3px solid green;
}
/* Checkmark for both radio and check box */
input:checked + .checkmark-selection:before {
  content: "";
  position: absolute;
  margin: 5px 3px;
  height: .3rem;
  width: .7rem;
  background: transparent;
  border: 3px solid #f2f2f2;
  border-top-style: none !important;
  border-right-style: none !important;
  border-radius: 0px;
  transform: rotate(-45deg);
}
/* Make check box inputs square */
input[type="checkbox"] + .checkmark-selection {
  border-radius: 0px;
}