Question

Vaadin文本字段具有默认下划线。我要删除它。我在Vaadin组合框中使用它。

在开发工具中，我可以看到原因是带有属性part="input-field"的div。在浏览器中可以将其设置为display: none;。我似乎无法以代码为目标。我尝试了以下方法：

`[part="input-field"] {
     display: none !important;
 }
 .vaadin-text-field-container [part="input-field"] {
     display: none !important;
 }`

Answer 1

将Viritin插件（使用最新版本）添加到您的项目中，并配置：

TextField field = new MTextField().withSpellCheckOff();

OR

您可以使用低级API配置html元素：

new HtmlElementPropertySetter(yourTextInputComponent).setProperty(
                "spellcheck", false);

Answer 2

我通过将此模块添加到HTML文件中解决了该问题。我将此放置在文件中的第一个脚本标签上方。

<dom-module id="vaadin-text-field-module" theme-for="vaadin-text-field">
<template>
  <style>
    div::before, div::after {
      display: none;
    }
  </style>
</template>

:before是输入值之前的下划线，:after是输入值之后的下划线。因此，这将禁用两者。 [part="input-field"]禁用了输入，选择后看不到该值。

Vaadin TextField：如何禁用下划线？

2 个答案: