如何使用制表键选择自定义单选按钮？

Question

我创建了一个自定义单选按钮。现在，我的问题是，如何使用选项卡选择单选按钮？

我的页面上有一个输入字段、单选按钮和选择下拉菜单。当我在输入字段中输入并按选项卡时，它将转到单选按钮

当我按下标签时此代码不起作用

[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: #2a2e3e;
}

[type="radio"]:not(:checked)+label:before {
  border: 2px solid #ccc;
}

[type="radio"]:checked+label:before {
  border: 2px solid #5E1DD6;
}

[type="radio"]:checked+label:before,
[type="radio"]:not(:checked)+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  background: #fff;
}

[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
  content: '';
  width: 10px;
  height: 10px;
  background: #5E1DD6;
  position: absolute;
  top: 6px;
  left: 6px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

[type="radio"]:not(:checked)+label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

[type="radio"]:checked+label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="w-75">
  <form>
    <div class="row">
      <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
        <input type="text" name="name">
      </div>

      <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">


        <div class="d-flex justify-content-center">
          <div class="form-check  ps-0">
            <input type="radio" id="todYES" class="radio-custom" name="tod-app" value="1">
            <label for="todYES" class="radio-custom-label">Yes</label>
          </div>
          <div class="form-check">
            <input type="radio" id="todNO" class="radio-custom" name="tod-app" value="0">
            <label for="todNO" class="radio-custom-label">No</label>
          </div>
        </div>
      </div>

      <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
        <div class="form-group">
          <select class="form-select" name="width-access">
            <option selected="" disabled="">Select</option>
          </select>
        </div>
      </div>
    </div>
  </form>
</div>

当我按下标签时，此代码正在工作。 （没有 CSS）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="w-75">
  <form>
    <div class="row">
      <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
        <input type="text" name="name">
      </div>

      <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">


        <div class="d-flex justify-content-center">
          <div class="form-check  ps-0">
            <input type="radio" id="todYES" class="radio-custom" name="tod-app" value="1">
            <label for="todYES" class="radio-custom-label">Yes</label>
          </div>
          <div class="form-check">
            <input type="radio" id="todNO" class="radio-custom" name="tod-app" value="0">
            <label for="todNO" class="radio-custom-label">No</label>
          </div>
        </div>
      </div>

      <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
        <div class="form-group">
          <select class="form-select" name="width-access">
            <option selected="" disabled="">Select</option>
          </select>
        </div>
      </div>
    </div>
  </form>
</div>

Answer 1

不重要

我认为有一种引导方法可以做到这一点

您的 HTML 实际上专注于左侧 -9999px 的收音机

这里我需要点击收音机

$(".row").on("focusin",function(e) {
  const $tgt = $(e.target); console.log($tgt[0].className)
  if ($tgt && $tgt.is(".radio-custom")) {
    const $rad = $tgt.closest("div").find("[type=radio]");
    $rad.click()
  }
});

[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

[type="radio"]:checked+label,
[type="radio"]:active+label,
[type="radio"]:not(:checked)+label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: #2a2e3e;
}

[type="radio"]:not(:checked)+label:before {
  border: 2px solid #ccc;
}

[type="radio"]:active+label:before, 
[type="radio"]:checked+label:before {
  border: 2px solid #5E1DD6;
}

[type="radio"]:active+label:before, 
[type="radio"]:checked+label:before,
[type="radio"]:not(:checked)+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  background: #fff;
}

[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
  content: '';
  width: 10px;
  height: 10px;
  background: #5E1DD6;
  position: absolute;
  top: 6px;
  left: 6px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

[type="radio"]:not(:checked)+label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

[type="radio"]:checked+label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="w-75">
  <form>
    <div class="row">
      <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
        <input type="text" name="name">
      </div>

      <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">


        <div class="d-flex justify-content-center">
          <div class="form-check  ps-0">
            <input type="radio" id="todYES" class="radio-custom" name="tod-app" value="1">
            <label for="todYES" class="radio-custom-label">Yes</label>
          </div>
          <div class="form-check">
            <input type="radio" id="todNO" class="radio-custom" name="tod-app" value="0">
            <label for="todNO" class="radio-custom-label">No</label>
          </div>
        </div>
      </div>

      <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
        <div class="form-group">
          <select class="form-select" name="width-access">
            <option selected="" disabled="">Select</option>
          </select>
        </div>
      </div>
    </div>
  </form>
</div>