问题描述
我创建了一个自定义单选按钮。我对 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>
解决方法
问题在于您使用绝对位置将“真实”输入定位在视口之外。因此,tabindex 输入单选框实际上正在工作,但仅适用于“输入”标签,而不适用于“标签”标签。
我建议将 tabindex 设置为“label”标签而不是 input:
<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>
并为 input + label 焦点元素添加自定义 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,.25);
border-radius: 1rem;
}