时间戳

首页 > 解决方案 > 单击时未检查自定义单选按钮

html - 单击时未检查自定义单选按钮

问题描述

我使用 HTML 和 CSS 创建了一个自定义单选按钮

.radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: 10px;
}

.radio__input {
  display: none;
}

.radio__radio {
  width: 1.25em;
  height: 1.25em;
  border: 2px solid #87cac3;
  border-radius: 50%;
  margin-left: 10px;
  box-sizing: border-box;
  padding: 2px;
}

.radio__radio::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: #87cac3;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.15s;
}

.radio__input:checked+.radio__radio::after {
  transform: scale(1)
}
<div>
  <label for="myRadioId" class="radio">Agree</label>
  <input type="radio" name="myRadioField" id="myRadioId" class="radio__input">
  <div class="radio__radio"></div>
  </label>
</div>

该代码似乎无法准确运行，这意味着单击时未检查单选按钮。我认为问题出在 .radio__radio::after 里面我已经完成了 trnsform: scale(0) 所以它应该在刷新页面时默认将其比例更改为零，并且在检查时它应该将比例更改为 1。

标签： htmlcss

解决方案

感谢大家的投入。问题解决了，我刚刚autocomplete= "off"在<input>标签内添加了它，它工作正常。

.container {
  padding-top: 10px;
  text-align: center;
}

.radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: 10px;
}

.radio__input {
  display: none;
}

.radio__radio {
  width: 1.25em;
  height: 1.25em;
  border: 2px solid #87cac3;
  border-radius: 50%;
  margin-left: 10px;
  box-sizing: border-box;
  padding: 2px;
  padding-bottom: 2px;
}

.radio__radio::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: #87cac3;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.15s;
}

.radio__input:checked+.radio__radio::after {
  transform: scale(1)
}
<div class="container">
  <h1>Question 1</h1>
  <h4>Agree
    <label class="radio">
            <input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="1">  
            <div class="radio__radio"></div>
          </label>
    <label class="radio">
            <input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="2">  
            <div class="radio__radio"></div>
          </label>
    <label class="radio">
            <input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="3">  
            <div class="radio__radio"></div>
          </label>
    <label class="radio">
            <input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="4">  
            <div class="radio__radio"></div>
          </label>
    <label class="radio">
            <input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="5">  
            <div class="radio__radio"></div>
          </label> Disagree
  </h4>
</div>

推荐阅读