如何在 Foundation 5 中控制 Active/Focused 按钮上的 CSS

Question

我已经创建了一个基于 Foundation 5 前端平台的 CMS。我在其中创建了一个 CSS 生成器，它基本上允许通过在实时站点上管理对整个样式表进行 SASS 类型控制。

系统运行良好，但是，我找不到如何控制出现在 active/focused button 上的 box shadow 样式。这是在我的生成器中为 focused button 生成样式的代码，它直接取自 Foundation Stylesheet:

$code .= 'button:hover, button:focus, .button:hover, .button:focus{';
    $code .= 'background-color: '.changeColor($primary, $primary_hover_percent).';';
    $code .= 'border-color: '.changeColor($primary, $primary_border_percent_hovered).';';
    $code .= 'color: '.$primary_font_color_hovered.';';
    $code .= '}';

默认情况下，Foundation 在 focused button 上应用原色作为 box shadow。我的问题是我找不到发生这种情况的地方。由于 box shadow 属性不在他们样式表的这一部分中，我假设它由 javascript.

控制

我已经通过 javascript 进行了搜索，但似乎找不到任何控制添加 box shadow 的代码。虽然我确信这是一个非常简单的解决方案，但答案暗示了我。非常感谢任何帮助。

样本

右边的按钮是active/focused按钮...仔细看可以看到蓝色框的影子。

更好的视野

更新

我已经隔离了蓝色的十六进制代码，并在两个样式表上搜索了颜色，但没有成功，并且搜索了所有 js 文件，希望找到 addClass() 和 class比如.active之类的也无济于事。同样，非常欢迎任何关于此事的想法。

Answer 1

每天学点新东西...来发现这个问题与任何Foundation 5代码无关。出于可访问性原因，蓝色阴影是 Chrome 中设置在 :focus 中的浏览器设置。在 Firefox 中，浏览器应用虚线边框。

有关此问题的信息可在此处找到：

http://outlinenone.com/

分辨率：

CSS属性是：outline

为了解决这个问题，我只是在上面的代码中添加了 outline-style: none;。

如何在 Foundation 5 中控制 Active/Focused 按钮上的 CSS

How to control the CSS on an Active/Focused button in Foundation 5

javascript

css

zurb-foundation

zurb-foundation-5

样本

更好的视野

更新

分辨率：