焦点错误上的 CSS Safari 元素+元素选择器？答案

【问题标题】：CSS Safari element+element selector on focus bug?焦点错误上的 CSS Safari 元素+元素选择器？
【发布时间】：2016-06-03 19:51:14
【问题描述】：

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

以下 sn-p 适用于 Chrome、Edge、Firefox - 不适用于 MacOS 的 Safari：

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

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

感谢您的帮助。

【问题讨论】：

标签： css safari css-selectors focus

【解决方案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;
}*/

&lt;div class="buttongroup"&gt;&lt;button ga-tag="input" data-value="patient" class="selected"&gt;Hey&lt;/button&gt;&lt;button ga-tag="input" data-value="caregiver" class=""&gt;There&lt;/button&gt;&lt;/div&gt;

【讨论】：

嗨@Veda M，欢迎来到SO。请考虑在您的代码中添加一些描述（例如，它为什么起作用，解决问题需要什么）。谢谢。

【解决方案2】：

如果你有 'a' 标签，你可以在 HTML 标签中添加 "tabindex" 属性来修复 Safari 上的这个问题。例如：

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

阅读更多关于 tabindex here

【讨论】：

【解决方案3】：

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

或:active 将生效。但是，直到鼠标按下。当你释放它会移除效果。

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

Fiddle Link

【讨论】：

感谢您的评论。一个 3 岁的错误仍然存在 - 嗯......我已经构建了一个解决方法并为上面的元素添加了一个悬停选项。遗憾的是，“活动”状态是没有选择的。