标签上方的收音机

Question

我正在使用 bootstrap v4 并且有一系列自定义 css 样式的单选按钮，我在单选按钮旁边的标签处设置了样式。

但是我现在想创建一个新样式，其中收音机位于标签上方并居中，但我似乎无法获得正确的样式，因为我正在使用 :before。

第一个代码是收音机旁边的标签，第二个代码是我试图在标签上方设置收音机样式的地方

html

<div class="row">
  <div class="col-md-4">
    <div class="horizontal sau-select md selected">
      <input id="rad-1" class="sau-radio pt-2" name="radio-myg" type="radio" value="linux">
        <label for="rad-1" class="sau-radio-label pt-2">Linux</label>
    </div>
  </div>
  <div class="col-md-4">
    <div class="vertical sau-select md">
      <input type="radio" name="fruits" id="fruit2" class="sau-radio">
        <label for="fruit2" class="sau-radio-label">Apple</label>
    </div>
  </div>
</div>

scss

.sau-select:focus{
    border:1px solid $blue;
}

.sau-select{
    border:1px solid $gray-100;
    padding:10px;
  cursor: pointer;
    img{
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
        position:relative;
        margin-top:-10px;
        float:right;
        padding-bottom:10px;
    }
    &.md{
        padding:20px;
        .sau-radio-label{
            font-size:1.4rem;
        }
        .sau-radio + .sau-radio-label:before{
            width: 30px;
            height: 30px;
        }
    }
    &:hover{
        @extend .selected;
    }
}

.sau-select{
    &.selected{
            border: 1px solid $blue;
            color:$blue;
            .sau-radio + .sau-radio-label:before{
                border: 1px solid $blue;
            }
            img{
                -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
                filter: grayscale(0%);
            }
            .sau-radio:checked + .sau-radio-label:before {
                background:$blue;
                box-shadow: inset 0px 0px 0px 2px #fff;
            }
    }
}

.sau-checkbox, .sau-radio {
    opacity: 0;
    position: absolute;
}

.sau-checkbox, .sau-checkbox-label, .sau-radio, .sau-radio-label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.sau-checkbox-label, .sau-radio-label {
    position: relative;
}

.sau-checkbox + .sau-checkbox-label:before, .sau-radio + .sau-radio-label:before {
    content: '';
    background: $white;
    border: 1px solid $gray-500;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}



.sau-checkbox:checked + .sau-checkbox-label:before {
    background: $gray-500;
    box-shadow: inset 0px 0px 0px 2px #fff;
}

.sau-radio + .sau-radio-label:before {
    border-radius: 50%;
}

.sau-radio:checked + .sau-radio-label:before {
    background: $gray-500;
    box-shadow: inset 0px 0px 0px 2px #fff;
}

/* If using flex  */
.flex-container{
    display: flex;
    flex-direction:row;
    padding: 0 1%;
    flex-wrap: wrap;
    margin:0 -15px 0 -15px;
}

.horizontal{
    display: flex;
    flex:1;
    align-items: center;
    margin: 0 1%;
    img{
        margin-left:auto;
    }
}

.vertical{
    display: flex;
    flex-direction: column;
    align-items: center;
   justify-content: center;
    label {

        text-align: center;
        margin: 0 0.2em;
    }
    label input[type="radio"] {
        display: block;
        margin: 0.5em auto;
    }

}

Answer 1

您可以通过将<input> 放在<label> 中来实现它，这是标准方式。

<label for="fruit2" class="sau-radio-label radio">
    <input type="radio" name="fruits" id="fruit2">
        Aligned Radio
</label>

您需要做的就是从输入中删除类 sau-radio 并立即自定义单选按钮的样式。

SCSS Codepen Example

.sau-select:focus {
  border: 1px solid blue;
}

.sau-select {
  border: 1px solid gray;
  padding: 10px;
  cursor: pointer;
}

.sau-select img {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  position: relative;
  margin-top: -10px;
  float: right;
  padding-bottom: 10px;
}

.sau-select .md {
  padding: 20px;
}

.sau-select .sau-radio-label {
  font-size: 1.4rem;
}

.sau-select .sau-radio+.sau-radio-label:before {
  width: 30px;
  height: 30px;
}

.sau-select:hover {
  @extend .selected;
}

.sau-select .selected {
  border: 1px solid blue;
  color: blue;
}

.sau-select .sau-radio+.sau-radio-label:before {
  border: 1px solid blue;
}

.sau-select img {
  -webkit-filter: grayscale(0%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

.sau-select .sau-radio:checked+.sau-radio-label:before {
  background: blue;
  box-shadow: inset 0px 0px 0px 2px #fff;
}

.sau-checkbox,
.sau-radio {
  opacity: 0;
  position: absolute;
}

.sau-checkbox,
.sau-checkbox-label,
.sau-radio,
.sau-radio-label {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.sau-checkbox-label,
.sau-radio-label {
  position: relative;
}

.sau-checkbox+.sau-checkbox-label:before,
.sau-radio+.sau-radio-label:before {
  content: "";
  background: white;
  border: 1px solid gray;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}

.sau-checkbox:checked+.sau-checkbox-label:before {
  background: gray;
  box-shadow: inset 0px 0px 0px 2px #fff;
}

.sau-radio+.sau-radio-label:before {
  border-radius: 50%;
}

.sau-radio:checked+.sau-radio-label:before {
  background: gray;
  box-shadow: inset 0px 0px 0px 2px #fff;
}

.flex-container {
  display: flex;
  flex-direction: row;
  padding: 0 1%;
  flex-wrap: wrap;
  margin: 0 -15px 0 -15px;
}

.horizontal {
  display: flex;
  flex: 1;
  align-items: center;
  margin: 0 1%;
  img {
    margin-left: auto;
  }
}

.vertical {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.vertical label {
  text-align: center;
  margin: 0 0.2em;
}

label input[type="radio"] {
  display: block;
  margin: 0.5em auto;
}

<div class="row">
  <div class="col-md-4">
    <div class="horizontal sau-select md selected">
      <input id="rad-1" class="sau-radio pt-2" name="radio-myg" type="radio" value="linux">
      <label for="rad-1" class="sau-radio-label pt-2">Linux</label>
    </div>
  </div>
  <div class="col-md-4">
    <div class="vertical sau-select md">

      <label for="fruit2" class="sau-radio-label radio"><input type="radio" name="fruits" id="fruit2">Aligned Radio</label>
    </div>
  </div>
</div>