Vaadin 焦点颜色

Question

是否有全局方法可以停用焦点颜色？正如你在附件中看到的那样？

提前致谢！

最好的问候， 托马斯

Answer 1

该边框是“聚焦环”（它是一种辅助功能，表明该字段已从键盘交互获得焦点，但在使用鼠标聚焦该字段时不会显示）。

对焦环的样式取决于每个组件和主题。

例如，在鲁磨的TextField的聚焦环是CSSbox-shadow的input-field一部分：

:host([focus-ring]) [part="input-field"] {
  box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
}

:host([invalid][focus-ring]) [part="input-field"] {
  box-shadow: 0 0 0 2px var(--lumo-error-color-50pct);
}

找到这些样式的一个方便的方法是检查<style>组件的 shadow DOM 中的标签

您可以覆盖 vaadin-text-field 的焦点环

:host([focus-ring]) [part="input-field"] {
  box-shadow: none !important
}

然后，使用with或通过导入样式表。@CssImportthemeFor="vaadin-text-field"registerStyles