Question

我正在尝试使用element+element-Selector更改按钮后面的元素的CSS。

以下代码段适用于Chrome，Edge，Firefox - 不适用于Safari 适用于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>

任何想法，我如何解决这个问题？

感谢您的帮助。

Answer 1

有bug in safari。它不会在safari中点击焦点事件。而是将焦点事件提供给 TAB 点击。

或:active生效。但是，当鼠标按下时。当你松开它会消除效果。

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

<强> Fiddle Link

Answer 2

如果您具有“ a”标签，则只需向HTML标签添加“ tabindex”属性即可在Safari上解决此问题。例如：

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

详细了解tabindex here

Answer 3

.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>

焦点bug上的CSS Safari元素+元素选择器？

3 个答案: