时间戳

首页 > 解决方案 > Tabindex 不适用于自定义单选按钮

html - Tabindex 不适用于自定义单选按钮

问题描述

我创建了一个自定义单选按钮。我的问题tabindex。当我按下选项卡时，它没有选择单选按钮。我在Labelname1.

我该如何解决这个问题？

$('input[name="tod-app"]').click(function() {
  if ($('#todNO').is(':checked')) {
    $('.is_hide').show();
  } else {
    $('.is_hide').hide();
  }
});
[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);
}

.is_hide {
  display: none;
}
<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="row">
  <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
    <div class="form-group mb-4">
      <label for="" class="form-label">City</label>
      <select name="city" class="form-select" tabindex="1">
        <option value="" selected="" disabled="">Select city</option>
        <option value="">xyz</option>
      </select>
    </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 text-center position-relative todWrap">
      <label for="" class="form-label">Labelname1      
         </label>
      <div class="d-flex justify-content-center todWrapRadio">
        <div class="form-check  ps-0">
          <input type="radio" id="todYES" class="radio-custom" name="tod-app" value="1" tabindex="2">
          <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>
  <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
    <div class="form-group is_hide">
      <label for="" class="form-label">This field is hidden and enable when choose NO from Lablename1 </label>
      <div class="d-flex">
        <div class="form-check  ps-0">
          <input type="radio" id="lYES" class="radio-custom" name="limit" value="1">
          <label for="lYES" class="radio-custom-label">Yes</label>
        </div>
        <div class="form-check">
          <input type="radio" id="lno" class="radio-custom" name="limit" value="0">
          <label for="lno" class="radio-custom-label">No</label>
        </div>
      </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 position-relative">
      <label for="" class="form-label">Labelname2
         </label>
      <div class="d-flex" id="grossErrorshow">
        <input type="text" class="form-control input-border-radiusR0 border-end-0" aria-label="Text input with dropdown button" name="gross-1" tabindex="3">
        <div class="custom-dropdown">
          <select class="form-select input-border-radiusL0" aria-label="Default select example" name="roadunit" tabindex="4">
            <option value="mt">Sqr Mtr</option>
            <option value="sf">Sqr Fts</option>
          </select>
        </div>
      </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 mb-4 position-relative">
      <label for="" class="form-label">Labelname3
         </label>
      <div class="d-flex" id="roadWideningErrorshow">
        <input type="text" class="form-control input-border-radiusR0 border-end-0" aria-label="Text input with dropdown button" name="road1" tabindex="5">
        <div class="custom-dropdown">
          <select class="form-select input-border-radiusL0" aria-label="Default select example" name="roadWidenUnit" tabindex="6">
            <option value="mt">Sqr Mtr</option>
            <option value="sf">Sqr Fts</option>
          </select>
        </div>
      </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">
      <label for="" class="form-label">Labelname4</label>
      <select class="form-select" aria-label="Default select example" name="width-access" tabindex="7">
        <option selected="" disabled="">Select access</option>
        <option value="0-9">
          < 9 Mtr</option>
            <option value="9-12">9 to 12 mt</option>
            <option value="12-15">12 to 15 mt</option>
            <option value="15-18">15 to 18 mt</option>
            <option value="18-24">18 to 24 mt</option>
            <option value="24-30">24 to 30 mt</option>
            <option value="30-0">> 30 mt</option>
      </select>
    </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 customrange position-relative">
      <div class="d-flex justify-content-between">
        <label>Labelname5
            </label>
        <div class="loadinrangevalue"><input type="text" name="loading" value="0" max="100" tabindex="8">%</div>
      </div>
      <input type="range" class="form-range customRange" value="0" min="0" max="100">
      <div class="d-flex justify-content-between">
        <span>0</span>
        <span>100</span>
      </div>
    </div>
  </div>
  <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="form-group">
      <input type="checkbox" id="aggred" name="iaggred" value="1" tabindex="9"> I agree to the <a href="">terms and condition</a>
      <div class="iaggrederror"></div>
    </div>
    <div class="pt-3 pb-3">
      <input type="submit" name="submit" value="Calculate" class="btn themeBg btn-black" tabindex="10">
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

标签： htmlcssradio-buttontabindex

解决方案

问题是您使用绝对位置将“真实”输入定位在视口之外。因此，tabindex 输入单选实际上正在工作，但仅适用于“输入”，而不适用于“标签”标签。

我建议将 tabindex 设置为“标签”标签而不是输入：

<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" tabindex="2">Yes</label>
</div>

并为输入 + 标签焦点元素添加自定义 CSS：

[type="radio"]:focus + label {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    border-radius: 1rem;
}

如果您只想选择单选按钮：

[type="radio"]:focus + label:before {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    border-radius: 1rem;
}

推荐阅读