聚焦时自定义 <vaadin-button>

Question

我想在 Vaadin 14.6 中创建一个自定义的 Lumo 主题，其中按钮 (<vaadin-button>) 在聚焦时显示双边框 (css: box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--some-custom-background-color);)。虽然其他 <vaadin-button> 伪选择器的自定义样式（例如 :hover、:active 等）效果很好，但我找不到自定义 :focus 外观的方法。

Answer 1

需要使用应用于宿主元素的 focused 和 focus-ring 状态属性自定义焦点样式。

应用 focused 属性，按钮通过 mouse/pointer 或键盘获得焦点，而 focus-ring 仅在通过键盘获得焦点时应用（对应于原生 :focus-visible伪class).

:host([focused]) {
  ...
}

:host([focus-ring]) {
  ...
}

Answer 2

我发现实际上是 Firefox 没有显示 :focus 相关的 css。 Chrome 和 Safari 会根据需要显示样式。

为了完整起见，这是相关的 css，它进入应用程序 'themes/components' 文件夹中的 'vaadin-button.css'：

:host([theme~="primary"]:focus) {
    height: calc(var(--my-button-size) - 6px);
    border-radius: 1px;
    background-color: var(--my-button-primary-background-color-focus);
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--my-button-primary-background-color);
}

聚焦时自定义 <vaadin-button>

Customizing <vaadin-button> when in focus

css

vaadin

customization

vaadin-flow

theming