将单选框放在其标签的左侧

时间：2021-04-01 14:36:24

标签： html css

我想把单选框放在每个标签的右边：

.choices .choices-list {
  list-style: none;
}
.choices .item:nth-of-type(n + 2) {
  margin-top: 10px;
}
.choices .checkbox,
.choices .radio {
  position: absolute;
  opacity: 0;
}
.choices .checkbox + label,
.choices .radio + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  user-select: none;
  font-size: 0.875rem;
  text-transform: capitalize;
  font-weight: 600;
  color: #212121;
  transition: color 0.15s ease;
}
.choices .checkbox + label::before,
.choices .radio + label::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #dddd;
  transition: background 0.2s ease, box-shadow 0.2s ease, border 0.1s ease-in;
}
.choices .checkbox:hover + label::before,
.choices .radio:hover + label::before {
  background: #f5f5f5;
  box-shadow: 0 0 0 3px rgba(117, 121, 231, 0.4);
}
.choices .checkbox:hover + label,
.choices .radio:hover + label {
  color: black;
}
.choices .checkbox + label {
  padding-left: 30px;
}
.choices .checkbox + label::before {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.choices .checkbox + label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAvklEQVRIS+2U0Q3CMAwFzxuwCYwAEzECdAM2ghHoJmxgZJRIUWgTh9C/9Du9q59fKmz8yMZ8hqCa8IjoE5Gq7oCziEx5Zt0RBfgdOACTiFxTSZcgg8/AUURefxF44Cb6aQIvvChQVcvylo/cAl8VBPgFeAKnKGmFlwRWuwewj5KwuNiWxYUuXevVHYSvTSX2vlXRDa8uOZPY+SZ4VZDcUpvEnq+e1/52rpqGScgbVYO7JvBASmdcE/RIhqCa3ht9IVAZxGa2wAAAAABJRU5ErkJggg==");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border-radius: 2px;
  transition: transform 0.1s ease-in;
}
.choices .checkbox:checked + label::before {
  border-color: #7579e7;
  background: #7579e7;
}
.choices .checkbox:checked + label::after {
  transform: translateY(-50%) scale(1);
  transition: transform 0.2s ease-out;
  opacity: 1;
}

.choices .radio + label {
  padding-left: 32px;
}
.choices .radio + label::before {
  width: 22px;
  height: 22px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-width: 0;
  border-style: solid;
  border-color: #7579e7;
}
.choices .radio:checked + label::before {
  background: #ffffff;
  border-color: #7579e7;
  border-width: 7px;
  transition: background 0.2s ease, border 0.3s ease-out;
}
<div class="multiple-choice">

    <h1 class="question">سوال در اینجا رار می گیرد؟</h1>

    <form class="choices">
      <ul class="choices-list">
         <li class="item">
            <label for="children">children</label>
            <input type="radio" name="age" class="radio" id="children">
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="teen">
            <label for="teen">teen</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="adult">
            <label for="adult">adult</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="aduflt">
            <label for="aduflt">adult</label>
         </li>
      </ul>
    </form>

  </div>

我试图将标签放在输入标签之前来实现这一点，但单选框消失了！！！

我该如何解决这个问题？

3 个答案:

答案 0 :(得分：1)

它已经在使用绝对定位...所以用右边替换它的左边属性。 如果您希望它们对齐在一起，您可以使用 flexbox 行，或者您可以在容器上设置相对。

.choices .choices-list {
  list-style: none;
}
.choices .item:nth-of-type(n + 2) {
  margin-top: 10px;
}
.choices .checkbox,
.choices .radio {
  position: absolute;
  opacity: 0;
}
.choices .checkbox + label,
.choices .radio + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  user-select: none;
  font-size: 0.875rem;
  text-transform: capitalize;
  font-weight: 600;
  color: #212121;
  transition: color 0.15s ease;
}
.choices .checkbox + label::before,
.choices .radio + label::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(35px, -50%);
  background: #dddd;
  transition: background 0.2s ease, box-shadow 0.2s ease, border 0.1s ease-in;
}
.choices .checkbox:hover + label::before,
.choices .radio:hover + label::before {
  background: #f5f5f5;
  box-shadow: 0 0 0 3px rgba(117, 121, 231, 0.4);
}
.choices .checkbox:hover + label,
.choices .radio:hover + label {
  color: black;
}
.choices .checkbox + label {
  padding-left: 30px;
}
.choices .checkbox + label::before {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.choices .checkbox + label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAvklEQVRIS+2U0Q3CMAwFzxuwCYwAEzECdAM2ghHoJmxgZJRIUWgTh9C/9Du9q59fKmz8yMZ8hqCa8IjoE5Gq7oCziEx5Zt0RBfgdOACTiFxTSZcgg8/AUURefxF44Cb6aQIvvChQVcvylo/cAl8VBPgFeAKnKGmFlwRWuwewj5KwuNiWxYUuXevVHYSvTSX2vlXRDa8uOZPY+SZ4VZDcUpvEnq+e1/52rpqGScgbVYO7JvBASmdcE/RIhqCa3ht9IVAZxGa2wAAAAABJRU5ErkJggg==");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border-radius: 2px;
  transition: transform 0.1s ease-in;
}
.choices .checkbox:checked + label::before {
  border-color: #7579e7;
  background: #7579e7;
}
.choices .checkbox:checked + label::after {
  transform: translateY(-50%) scale(1);
  transition: transform 0.2s ease-out;
  opacity: 1;
}

.choices .radio + label {
  padding-left: 32px;
}
.choices .radio + label::before {
  width: 22px;
  height: 22px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-width: 0;
  border-style: solid;
  border-color: #7579e7;
}
.choices .radio:checked + label::before {
  background: #ffffff;
  border-color: #7579e7;
  border-width: 7px;
  transition: background 0.2s ease, border 0.3s ease-out;
}
<div class="multiple-choice">

    <h1 class="question">سوال در اینجا رار می گیرد؟</h1>

    <form class="choices">
      <ul class="choices-list">
         <li class="item">
            <label for="children">children</label>
            <input type="radio" name="age" class="radio" id="children">
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="teen">
            <label for="teen">teen</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="adult">
            <label for="adult">adult</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="aduflt">
            <label for="aduflt">adult</label>
         </li>
      </ul>
    </form>

  </div>

答案 1 :(得分：1)

要将它们全部对齐到相同的数量，请使用 left: <value>。

.choices .choices-list {
  list-style: none;
}
.choices .item:nth-of-type(n + 2) {
  margin-top: 10px;
}
.choices .checkbox,
.choices .radio {
  position: absolute;
  opacity: 0;
}
.choices .checkbox + label,
.choices .radio + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  user-select: none;
  font-size: 0.875rem;
  text-transform: capitalize;
  font-weight: 600;
  color: #212121;
  transition: color 0.15s ease;
}
.choices .checkbox + label::before,
.choices .radio + label::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translate(35px, -50%);
  background: #dddd;
  transition: background 0.2s ease, box-shadow 0.2s ease, border 0.1s ease-in;
}
.choices .checkbox:hover + label::before,
.choices .radio:hover + label::before {
  background: #f5f5f5;
  box-shadow: 0 0 0 3px rgba(117, 121, 231, 0.4);
}
.choices .checkbox:hover + label,
.choices .radio:hover + label {
  color: black;
}
.choices .checkbox + label {
  padding-left: 30px;
}
.choices .checkbox + label::before {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.choices .checkbox + label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAvklEQVRIS+2U0Q3CMAwFzxuwCYwAEzECdAM2ghHoJmxgZJRIUWgTh9C/9Du9q59fKmz8yMZ8hqCa8IjoE5Gq7oCziEx5Zt0RBfgdOACTiFxTSZcgg8/AUURefxF44Cb6aQIvvChQVcvylo/cAl8VBPgFeAKnKGmFlwRWuwewj5KwuNiWxYUuXevVHYSvTSX2vlXRDa8uOZPY+SZ4VZDcUpvEnq+e1/52rpqGScgbVYO7JvBASmdcE/RIhqCa3ht9IVAZxGa2wAAAAABJRU5ErkJggg==");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border-radius: 2px;
  transition: transform 0.1s ease-in;
}
.choices .checkbox:checked + label::before {
  border-color: #7579e7;
  background: #7579e7;
}
.choices .checkbox:checked + label::after {
  transform: translateY(-50%) scale(1);
  transition: transform 0.2s ease-out;
  opacity: 1;
}

.choices .radio + label {
  padding-left: 32px;
}
.choices .radio + label::before {
  width: 22px;
  height: 22px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-width: 0;
  border-style: solid;
  border-color: #7579e7;
}
.choices .radio:checked + label::before {
  background: #ffffff;
  border-color: #7579e7;
  border-width: 7px;
  transition: background 0.2s ease, border 0.3s ease-out;
}
<div class="multiple-choice">

    <h1 class="question">سوال در اینجا رار می گیرد؟</h1>

    <form class="choices">
      <ul class="choices-list">
         <li class="item">
            <input type="radio" name="age" class="radio" id="children">
            <label for="children">children</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="teen">
            <label for="teen">teen</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="adult">
            <label for="adult">adult</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="aduflt">
            <label for="aduflt">adult</label>
         </li>
      </ul>
    </form>

  </div>

答案 2 :(得分：-1)

您只需要将 left: 0 替换为 right: -32px 即可用于 'label::before'。 然后你可以删除填充：

.choices .radio + label {
  padding-left: 32px;
}

工作示例：

.choices .choices-list {
  list-style: none;
}
.choices .item:nth-of-type(n + 2) {
  margin-top: 10px;
}
.choices .checkbox,
.choices .radio {
  position: absolute;
  opacity: 0;
}
.choices .checkbox + label,
.choices .radio + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  user-select: none;
  font-size: 0.875rem;
  text-transform: capitalize;
  font-weight: 600;
  color: #212121;
  transition: color 0.15s ease;
}
.choices .checkbox + label::before,
.choices .radio + label::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translateY(-50%);
  background: #dddd;
  transition: background 0.2s ease, box-shadow 0.2s ease, border 0.1s ease-in;
}
.choices .checkbox:hover + label::before,
.choices .radio:hover + label::before {
  background: #f5f5f5;
  box-shadow: 0 0 0 3px rgba(117, 121, 231, 0.4);
}
.choices .checkbox:hover + label,
.choices .radio:hover + label {
  color: black;
}
.choices .checkbox + label {
  padding-left: 30px;
}
.choices .checkbox + label::before {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.choices .checkbox + label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAvklEQVRIS+2U0Q3CMAwFzxuwCYwAEzECdAM2ghHoJmxgZJRIUWgTh9C/9Du9q59fKmz8yMZ8hqCa8IjoE5Gq7oCziEx5Zt0RBfgdOACTiFxTSZcgg8/AUURefxF44Cb6aQIvvChQVcvylo/cAl8VBPgFeAKnKGmFlwRWuwewj5KwuNiWxYUuXevVHYSvTSX2vlXRDa8uOZPY+SZ4VZDcUpvEnq+e1/52rpqGScgbVYO7JvBASmdcE/RIhqCa3ht9IVAZxGa2wAAAAABJRU5ErkJggg==");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border-radius: 2px;
  transition: transform 0.1s ease-in;
}
.choices .checkbox:checked + label::before {
  border-color: #7579e7;
  background: #7579e7;
}
.choices .checkbox:checked + label::after {
  transform: translateY(-50%) scale(1);
  transition: transform 0.2s ease-out;
  opacity: 1;
}
.choices .radio + label::before {
  width: 22px;
  height: 22px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-width: 0;
  border-style: solid;
  border-color: #7579e7;
}
.choices .radio:checked + label::before {
  background: #ffffff;
  border-color: #7579e7;
  border-width: 7px;
  transition: background 0.2s ease, border 0.3s ease-out;
}
<div class="multiple-choice">

    <h1 class="question">سوال در اینجا رار می گیرد؟</h1>

    <form class="choices">
      <ul class="choices-list">
         <li class="item">
            <label for="children">children</label>
            <input type="radio" name="age" class="radio" id="children">
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="teen">
            <label for="teen">teen</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="adult">
            <label for="adult">adult</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="aduflt">
            <label for="aduflt">adult</label>
         </li>
      </ul>
    </form>

</div>

相关问题
最新问题