Vaadin TextField: disabling underline

Vaadin text field has a default underline. I want to remove it. I am using it inside of a Vaadin combo box.

In dev tools I can see that a div with the attribute part=“input-field” is the cause. Setting it to display: none; works in the browser. I can’t seem to target it with code.
17787535.png

Please take a look at our theming documentation:

Basically you need to do something like:

<dom-module id="my-text-field" theme-for="vaadin-text-field">
  <template>
    <style>
      :host([theme~="my-special-text-field"]
) [part="input-field"]
 {
        ...
      }
    </style>
  </template>
</dom-module>

And then set theme="my-special-text-field" attribute for the vaadin-combo-box (the special theme attribute is inherited by sub components).

If you’re using the Java API you can set the theme name like comboBox.addThemeName("my-special-text-field") otherwise it’s easy to set in an HTML template too.

Hi Nkosi,

Just out of curiosity which underline are we talking about? Do you mean the focus outline? If so, that’s there for usability reasons.

If you remove it, just make sure that you have some other way of indicating which field is (clearly) focused, as to not compromise your users’ experience.

Kari Söderholm:
Please take a look at our theming documentation:

Basically you need to do something like:

<dom-module id="my-text-field" theme-for="vaadin-text-field">
  <template>
    <style>
      :host([theme~="my-special-text-field"]

) [part=“input-field”]
{

    ...
  }
</style>
```

And then set theme="my-special-text-field" attribute for the vaadin-combo-box (the special theme attribute is inherited by sub components).

If you’re using the Java API you can set the theme name like comboBox.addThemeName("my-special-text-field") otherwise it’s easy to set in an HTML template too.

I created a module and it worked. I am using it in my HTML file but something is telling me there is a better place for it. Does this also work in shared-styles? I am using polymer 3.

Nkosi Phillip:
I created a module and it worked. I am using it in my HTML file but something is telling me there is a better place for it. Does this also work in shared-styles? I am using polymer 3.

Since you mention “shared-styles” and Polymer 3 I guess you’re using Vaadin 14 in npm mode?

Afaik it should work if you just put the whole <dom-module id="my-text-field" theme-for="vaadin-text-field"> into the HTML block in your shared-styles.js.

E.g.
shared-styles.js:

const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `
<dom-module id="my-text-field" theme-for="vaadin-text-field">
  <template>
    <style>
      :host([theme~="my-special-text-field"]
) [part="input-field"]
 {
        ...
      }
    </style>
  </template>
</dom-module>

<!-- more custom styles may be defined... -->
`;

document.head.appendChild($_documentContainer.content);

Another related question. My designs call for the vaadin-text-field in the app to have different material styles depending on where they are placed.
Some should be filled text fields and others should be outlined text fields. I am presently using a dom-module to style it in index.html

The docs gave me the impression that it’s not possible to have separate styles for the text fields. I am referring to this paragraph: “When creating a theme module for an element, the styles in that theme module will apply to all instances of that element. The styles are always “global” in that sense and can’t be scoped by default with anything.”

Am I understanding this correctly? And is there a way of having styles applied to some instances?

Nkosi, the style module (which has theme-for="") itself applies to every component of the specified type, but depending on your use case you may be able to scope the styles within the style module using the :host() selector (and giving the specific components you want a custom class name or other attribute). In basic cases this should be simple (if you’re styling a “top level component” directly, but ma be difficult if you’re trying to style a sub component which is part of the shadow root of another component.

See these parts of the documentation for examples:

Styling sub components should be easy too in most cases using the theme attribute propagation as documented in the above link, but in some Vaadin components there are also cases where the theme attribute is not currently propagated automatically. For example this issue https://github.com/vaadin/vaadin-grid/issues/1636