How to change the color of vaadin-select-text-field in the vaadin-select within page only?

Question

How to change the color of vaadin-select-text-field from the vaadin-select within page only? For the vaadin-select source, it is not changed. I want to custom on the vaadin-select in the page. Anyone who can style the vaadin-select? I've tried to change the style of vaadin-select but it is none. This is because of the shadow-root. Hope the junior or senior

Accepted Answer

In one week, I’ve challenge with the background of vaadin-text-field. At end, I could git it. In the vaadin-text-styles.js, this pages actually created for a new copy js. The styles can changed to be transparent background.import '@vaadin/vaadin-lumo-styles/color.js';import '@vaadin/vaadin-lumo-styles/sizing.js';import '@vaadin/vaadin-lumo-styles/spacing.js';import '@vaadin/vaadin-lumo-styles/style.js';import '@vaadin/vaadin-lumo-styles/typography.js';import '@vaadin/vaadin-lumo-styles/mixins/required-field.js';import '@vaadin/vaadin-lumo-styles/font-icons.js';import '@vaadin/vaadin-lumo-styles/mixins/field-button.js';import { html } from '@polymer/polymer/lib/utils/html-tag.js';const $_documentContainer = html` `;document.head.appendChild($_documentContainer.content);And the vaadin-text-field-theme.js is also created for the copy vaadin-text-field. It is not modified but it should change ‘vaadin-text-field-1’ in static get is()./**@licenseCopyright (c) 2017 Vaadin Ltd.This program is available under Apache License Version 2.0, available at https://vaadin.com/license/*/import { PolymerElement } from '@polymer/polymer/polymer-element.js';import { TextFieldMixin } from '@vaadin/vaadin-text-field/src/vaadin-text-field-mixin.js';import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';import { html } from '@polymer/polymer/lib/utils/html-tag.js';import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';/** * `` is a Web Component for text field control in forms. * * ```html * * * ``` * * ### Prefixes and suffixes * * These are child elements of a `` that are displayed * inline with the input, before or after. * In order for an element to be considered as a prefix, it must have the slot * attribute set to `prefix` (and similarly for `suffix`). * * ```html * *

Sent to:

*

@vaadin.com

* * ``` * * ### Styling * * The following custom properties are available for styling: * * Custom property | Description | Default * ----------------|-------------|------------- * `--vaadin-text-field-default-width` | Set the default width of the input field | `12em` * * The following shadow DOM parts are available for styling: * * Part name | Description * ----------------|---------------- * `label` | The label element * `input-field` | The element that wraps prefix, value and suffix * `value` | The text value element inside the `input-field` element * `error-message` | The error message element * * The following state attributes are available for styling: * * Attribute | Description | Part name * -------------|-------------|------------ * `disabled` | Set to a disabled text field | :host * `has-value` | Set when the element has a value | :host * `has-label` | Set when the element has a label | :host * `invalid` | Set when the element is invalid | :host * `input-prevented` | Temporarily set when invalid input is prevented | :host * `focused` | Set when the element is focused | :host * `focus-ring` | Set when the element is keyboard focused | :host * `readonly` | Set to a readonly text field | :host * * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki) * * @memberof Vaadin * @mixes Vaadin.TextFieldMixin * @mixes Vaadin.ThemableMixin * @demo demo/index.html */class TextFieldElement extends ElementMixin(TextFieldMixin(ThemableMixin(PolymerElement))) { static get template() { return html`

[[label]]

[[errorMessage]]

`; } static get is() { return 'vaadin-text-field-1'; } static get version() { return '2.4.5'; } static get properties() { return { /** * Identifies a list of pre-defined options to suggest to the user. * The value must be the id of a element in the same document. */ list: { type: String }, /** * A regular expression that the value is checked against. * The pattern must match the entire value, not just some subset. */ pattern: { type: String }, /** * Message to show to the user when validation fails. */ title: { type: String } }; }}customElements.define(TextFieldElement.is, TextFieldElement);export { TextFieldElement };At the end, it can work with created the vaadin-text-field-1.import './vaadin-text-field-theme.js';import './vaadin-text-styles';After that, you can import ‘./vaadin-text-field-1.js’ in any pages.Thank you for sharing our experience with kind.

Advertisement

Answer