主页 / 问题 / 1553704
Accepted
Матвей Аплаев
Asked:2023-11-29 12:31:45 +0800 CST2023-11-29 12:31:45 +0800 CST

CSS 单选按钮

  • 772

在此输入图像描述

我们需要让按钮在您单击字段的任何部分时起作用，但我不知道如何做

radiobutton

1 个回答

  1. Best Answer

    实现此行为的最简单方法是用标签包装块<label>：

    label {
  margin: .5em auto;
  display: flex;
  flex-direction: column;
  padding: .5em 1em;
  border-radius: .25em;
  font: 16px/2em sans-serif;
  box-shadow: 0 0 1px 2px #ccc;
}

div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div:nth-of-type(2) {
  padding-left: 1.6em;
  color: #ccc;
}
    <label><div><span class="type"><input type="radio" name="by"> Разовая покупка</span><span class="price">2300 ₽</div><div>Доставка: 1 раз Доставка: 250 ₽</div></label>
<label><div><span class="type"><input type="radio" name="by"> Бартер</span><span class="price">По договорённости</div><div> Доставка: ∞ раз Доставка: cамовывоз</div></label>
<label><div><span class="type"><input type="radio" name="by"> Опт</span><span class="price">1700 ₽</div><div> Доставка: ∞ раз Доставка: 150 ₽</div></label>

    • 1

相关问题