How to see if checkbox has tab focus

[benny-chen-mpf]

The default checkbox/radio button shows/hides a border around the control when you tab in and out of it. Pretty-checkbox controls doesn't show this, so I have no idea which control has the focus. Is there a way to enable this?

[lokesh-coder]

Hi @benny-chen-mpf So, you want that focused border as a class?

Righ now the border will be there only for tab focus as you mentioned.

[benny-chen-mpf]

Hey @lokesh-coder, A class would be great. Right now I'm not seeing any border when a pretty-fied control gets focus.

[tonypeng]

following this as well 👍

[Chewieez]

I'm currently having this same issue. We are using radio buttons styled with pretty-checkbox using class="p-switch" and when I tab through, the toggles are not showing that they have the current focus. I can use the arrow keys to select radio button states, so focus is on the correct element, but there is not visual indication that focus is on the radio buttons.

I noticed that in your website examples, when I tab into the examples for the p-switch, there is no visible focus indicator.

Did some more testing and if I remove the class p-switch then the p-has-focus class works on my radio buttons. Sadly, for this project, we chose pretty-checkboxes to use the switch style.

Thanks!

---

I found a working solution for me. This may work for other's as well.

I wrapped the <label> element in a div and gave it a class. In my case it is:

<div class="pretty p-switch p-has-focus">
    <input type="radio" name="radio1">
        <div class="state">
          <div class="switch-label">
            <label> my label </label>
          </div>
        </div>
 </div>

Then in CSS, I overrode the position property like so:

.pretty.p-switch .state {
  position: static;
}

Then added this CSS to the div I added:

.switch-label {
    padding: .3rem; /* This will give the focus box a little padding */
    margin: -.3rem; /* this will keep your element in it's proper positioning after adding the padding */
}

.pretty.p-has-focus input:focus ~ .state .switch-label {
  outline: 4px auto rgba(0, 149, 255, 0.80);
  -webkit-outline: 4px auto rgba(0, 150, 255, 0.80);
  -moz-outline: 4px auto rgba(0, 150, 255, 0.80);
  -ms-outline: 4px auto rgba(0, 150, 255, 0.80);
  -o-outline: 4px auto rgba(0, 150, 255, 0.80);
}

With this code, when you tab focus on one of your input fields that are using .pretty.p-switch the label and switch will be wrapped in a light blue, semi transparent box that mimics the default focus box.

You can simplify it if you won't want to add the padding to the focus box. You could not add the div and just add the last chunk of css directly to the .state class of .pretty.p-has-focus input:focus ~ .state. But I think the padding helps since the switch element is a tad taller than the label text.

[rbonomo]

<style>
    .pretty input[type="checkbox"]:focus + .state:before {
        border-color: #66afe9;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
    }
    .pretty.p-switch .state:before {
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
</style>

This will give your switches a nice Bootstrap 3 input focus look.

[LaFeh]

<style>
    .pretty input[type="checkbox"]:focus + .state:before {
        border-color: #66afe9;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
    }
    .pretty.p-switch .state:before {
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
</style>

This will give your switches a nice Bootstrap 3 input focus look.

This is only a solution for the pseudo-class focus. Does anyone have an idea how to implement the pseudo-class focus-visible for a pretty-checkbox . I want there to be a border around the input, only if the user is navigating with the keyboard(by tab) , not if the user uses the mouse.