删除 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

我正在尝试做类似的事情并找到了这种"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>

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

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

Answer 3

问题（和解决方案）已经在我的问题中了：“[...]我猜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 当然必须得到那个类名：

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

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