CSS :focus for Buttons

I need to work with CSS for :focus events on buttons (other elements). I don’t see a focus state to work with. There’s a :hover state which works excellent.

(reason why I need to work with :focus)
I need to use the :focus for working with Arrow keys on TV Remote and also tab key, when it not being access through WebTV. The button color (css) needs to change according to what button (element) has the current :focus of the focus event.

I used clasify to give buttons the class of “focusable”. I put some test styling in the app header (via SEO/Metatags) for the buttons.

button.focusable:focus { background-color: #cf0652; }

However, it has zero effect on the buttons when the focus is on them.

Any help in how to best achieve this is greatly appreciated.

Buttons can not be focused, they can be pressed or hovered

buttons can be focused, for example with keyboard navigation

1 Like

Thanks for the clarification.

What is that typically, a user pressing tab on keyboard and then when the button ‘is focused’ pressing enter to ‘click/press’ the button?

1 Like

yes, that’one case where it’s nice to style the focus state to help the user. :focus-visible is useful for this.

it may be a problem of specificity. open the dev tools and check the element if bubble’s style is inline you need to use !important to override the style with a class

2 Likes

@dorilama, thanks for mentioning the use of !important in the CSS. That’s what it took to over-ride all the embedded inline style control. It sort of stuns me that :focus .focus() is missing from the Bubble States.

I’m working with spatial navigation for 4 way arrow control. Instead of 2 way arrow or tab control. GitHub - luke-chang/js-spatial-navigation: A javascript-based implementation of Spatial Navigation.

This is an App that needs to work with WebTV and most remotes have the 4 arrows and the back button. No Mouse like behavior involved. Actually can navigate the app now using the Arrow Keys on a Keyboard.

I’m now trying to find a better way of injecting JS in the workflow when a page loads. I’m working with a run javascript when page loads, but the editing box for it basically is driving me crazy. I don’t know if there’s a better way to add JS to specific pages during Load time. I’m having some issues and appears to be possible with Hydration? Do you have any recommendations for plugs in or alternative places to stuff js into? I’m stuffing references to various JS libs in the and placing CSS inside the CEO Marketing feature of the editor.

This is all rather interesting and rather awkward trying to get stuff to work, I’m use to doing all this stuff purely with code! Any advice regarding where to insert JS and awesome plug-in’s for that?

Again thanks for sharing the !important tip. Worked like a magic charm.

The default typical behavior is with the Tab key forward/backward on the keyboard, along with 2 arrow keys doing the same thing.

I’m working with a JS library that supports Spatial Navigation (All 4 arrow keys) and this also supports the 4 arrow keys on SmartTV device remotes.

This is also handy for implementing accessibility design into web applications, depending upon the specs.

Most Remotes for SmartTV apps don’t have an equivalent of a mouse cursor. A few do such as LGTV Magic Remote (that allows people to toggle between being able to point the control at the screen and move the cursor or switch back to purely arrow functions).

Anyways, this is where mere :hover styling doesn’t give the user any useful feedback and the magic of :focus .focus() and styling comes into play.

Hope this all makes sense, and this is above and past just the mere TAB forward/backward typical control.

Have a Great Day. =)

1 Like

build a plugin with the code you need to use in the app

Thank you for that explanation, and the use of the example for SmartTV as that really helped me understand the use of the focus on a button as well as the navigation with the arrows. Got me thinking now of an additional product to roll out for use on TV screens.