Topic: Tabbing through form never gives focus to radio buttons or check boxes
Brett King pro asked 7 years ago
<div class="md-form"> <input mdbActive type="text" id="form1" class="form-control"> <label for="form1" class="">Example label</label> </div> <div class="form-group"> <input name="group1" type="radio" id="radio1"> <label for="radio1">Option 1</label> </div> <div class="form-group"> <input name="group1" type="radio" id="radio2"> <label for="radio2">Option 2</label> </div> <div class="form-group"> <input name="group1" type="radio" id="radio3"> <label for="radio3">Option 3</label> </div> <div class="form-group"> <input type="checkbox" id="checkbox1"> <label for="checkbox1">Classic checkbox</label> </div> <div class="md-form"> <input mdbActive type="text" id="form2" class="form-control"> <label for="form2" class="">Example label</label> </div>
sonnich free answered 3 years ago
I found an even better way based on Sebastian Kaczmarek's idea.Locate the loki.css file (not sure whether the filename stays the same), locate this section:
input[type="radio"] {
display: none;
}
Change this to:
input[type="radio"] {
display: inline;
visibility: visible;
opacity: 0;
}
Next locate
input[type="radio"] + label:before {
Copy that section to:
input[type="radio"]:focus + label:before {
content: "";
display: inline-block;
height: 14px;
width: 14px;
margin-right: 5px;
background: white center center no-repeat;
border: 2px solid #108310; <- UPDATED
border-radius: 100%;
box-shadow: 0 0 1px #cccccc;
vertical-align: text-top;
}
Note the ":focus" in the first line. I update the border to show the user where focus is, so they can easily just tab and arrow keys.
ramix priority answered 5 years ago
I haven't seen any progress in this, though MDB staff is always working, I think this should get a lot of attention, as in many atmospheres this is considered very "bad" in terms of user experience. When one tabs through form components, he must know that he is focused on a checkbox or radio button.
STAFF - can you please handle this? I already put together some css as a direction: This code will make the focused mdb checkbox - have a line under it:
.form-check-input:focus + .form-check-label
{border: solid 2px #8A8A8A;
border-top: none;
border-left: none;
border-right: none;}
And here, I even created a snippet: https://mdbootstrap.com/snippets/jquery/ramix/1462115
Bartosz Termena staff commented 5 years ago
Hi!
Thank you for reporting the problem. We will take a closer look at that and try to resolve this problem as soon as possible. I will keep you informed.
Best Regards, Bartosz.
contactpetergray pro answered 7 years ago
Damian Gemza staff commented 6 years ago
Hello contactpetergray, In 5.1.2 release we've implemented this fix as mdbDeepDirective. Please update your's MDB and use this directive on your's checkboxes / radios. Best Regards, DamianSebastian Kaczmarek staff answered 7 years ago
<label>
s. The real <input>
s are hidden in CSS. The key thing here is that they have visibility: hidden;
rule applied and that's why you cannot tab through your form. The element is not visible in the document so it can't get focus. However, you can override this rule by editing your CSS files, e.x. app.component.scss
, just add this lines:
:host /deep/ [type=checkbox], :host /deep/ [type=radio] { visibility: visible !important; opacity: 0 !important; }Now you will be able to tab through your form. As an add-on, you can add some more styles to see how tabbing work. You can add a slight border to elements which got focused by adding this lines to your CSS file:
:host /deep/ [type=checkbox]:focus + label, :host /deep/ [type=radio]:focus + label { border: 1px solid rgb(207, 232, 255); }
Brett King pro commented 7 years ago
Chrome is telling me that /deep/ is deprecated, and I'm not seeing the change work in any other browser either.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No