CODEWITHSUNDEEP
csssafaricss-selectorsfocus
Andre
Andre

Reputation: 77

CSS Safari element+element selector on focus bug?

I'm trying to use the element+element-Selector to change the CSS for an element following a button.

The following snippet works in Chrome, Edge, Firefox - not in Safari for MacOS:

.button:focus+.change{
   color: red;
}
<p>When you focus the button, the text color should change to red.</p>

<button class="button">click me</button>
<div class="change">Change color</div>

Any ideas, how I could resolve this problem?

Thanks for your help.

Upvotes: 2

Views: 3665

Answers (3)

Veda M
Veda M

Reputation: 1

.buttongroup button {
    margin-bottom: 10px;
    display: block;
    border-radius: 10px;
    width: 100%;
    background: #f1f2f2;
    color: black;
    border: none;
    height: 45px;
    
    }

 .buttongroup > button:focus  {
        background: #25a0da !important;
}
/* This worked for me in safari and firefox. ATB

.buttongroup > button.selected {
        background: #25a0da !important;
}*/
<div class="buttongroup"><button ga-tag="input" data-value="patient" class="selected">Hey</button><button ga-tag="input" data-value="caregiver" class="">There</button></div>

Upvotes: 0

Mahmood
Mahmood

Reputation: 141

If you have 'a' tag, you can just add "tabindex" attribute to HTML tag to fix this issue on Safari. For example:

<a href="#" tabindex='-1' />

Read more about tabindex here

Upvotes: 0

ketan
ketan

Reputation: 19341

There is bug in safari. It will not give focus event on click in safari. Instead give focus event on TAB click.

Or :active will give effect. But, upto when mouse press. When you release it will remove effect.

.button:focus+.change, .button:active+.change{
   color: red;
}

Fiddle Link

Upvotes: 4

Related Questions