删除 Vaadin 14 只读文本字段的虚线边框

Question

只读 TextField 在 Vaadin 14 中有虚线边框，如下所示：

我想去掉虚线边框。对于某些 TextFields（理想情况下只有那些具有特殊 CSS 类名的文本字段 - 但我猜 CSS 选择器的扩展以后没有问题）。

因此我在 [projekt]/frontend/styles/ 中创建了一个文件 textfieldstyles.css，内容如下：

[part="input-field"]::after {
border-style: none;
border-width: 0px;
border-color: white;
/* does not change anything: border: 0px none white; */
}

并在我的 Vaadin-Java-组件中添加了注释：

@CssImport(value = "./styles/textfieldstyles.css", themeFor = "vaadin-text-field")

这没有（完全）按预期工作：我的 CSS 代码是元素样式的一部分（是的，成功 :)），但仅在潇洒样式之后（哦不 :( )。结果仍然是虚线边框。这是 Firefox 检查器的屏幕截图：

如何让我的样式排名高于标准 Vaadin 样式？

Answer 1

有几种方法可以完成您想要的；大多数涉及 !important，例如：

border-color: transparent !important;

很容易滥用 !important 来暴力破解您想要的样式，但在这种情况下，似乎是一种合适的用法。顺便说一句，您还可以覆盖其他 border-* CSS 属性，但只需一个即可，如我上面的示例所示。此外，避免更改 border-width 意味着根本不更改布局；该按钮仅通过使边框不可见来保留其尺寸（包括边框宽度）（transparent）。

希望对您有所帮助！

Answer 2

问题（和解决方案）已经出现在我的问题中：“[...] 我猜 CSS 选择器的扩展稍后没问题 [...]”。

当我在 [project]/frontend/styles/textfieldstyles.css:

中使用更专业的 CSS 选择器时一切正常

:host(.my-special-classname) [part="input-field"]::after {
    border-style: none;
    border-width: 0px;
    border-color: white;
}

TextField 当然必须得到 class 名称：

textField.addClassName("my-special-classname");

然后 Firefox 显示了我想要的顺序，Vaadin 14 只读 TextField 不再有虚线边框：

Answer 3

我正在尝试做类似的事情并找到了这种 "official" 方式。您可以在 index.html 中添加以下 CSS，这会将边框更改为细灰色边框，而不是删除虚线。

<dom-module id="read-only-field-styles" theme-for="vaadin-text-field">
  <template>
    <style>
      :host(.read-only) [part="input-field"]::after {
        border-style: solid;
        border-width: thin;
        border-color: grey;
      }
    </style>
  </template>
</dom-module>

然后，将 class 名称“只读”添加到您所有的 vaadin-text-field。

  <vaadin-text-field class="read-only" label="XXX" id="xxx" readonly></vaadin-text-field>

删除 Vaadin 14 只读文本字段的虚线边框

Remove dashed border for Vaadin 14 readonly textfields

css

vaadin

vaadin-flow