Удалить пунктирную границу для текстовых полей Vaadin 14 только для чтения

Question

TextField только для чтения имеет пунктирную границу в Vaadin 14, например:

Я хочу удалить пунктирную границу. Для некоторых TextFields (в ​​идеале только для тех, которые имеют специальное CSS имя класса - но я предполагаю, что расширение селектора CSS не проблема позже).

Поэтому я создал файл textfieldstyles. css in [projekt] / frontend / styles / с этим содержанием:

[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

Есть несколько способов выполнить sh то, что вы хотите; большинство из них включают !important, например:

border-color: transparent !important;

Легко использовать !important для стилей грубой силы, которые вы хотите, но в этом случае это кажется подходящим использованием. Кстати, вы также можете переопределить другие атрибуты border-* CSS, но только один сделает это, как в моем примере выше. Кроме того, избегать изменения border-width означает вообще не менять макет; кнопка сохраняет свои размеры (включая ширину границы), просто делая ее невидимой (transparent).

Надеюсь, это поможет!

Answer 2

Проблема (и решение) уже были в моем вопросе: «[...] Я думаю, что расширение селектора CSS не проблема позже [...]».

Все работает нормально, когда я использую более специализированный селектор CSS в [project] /frontend/styles/textfieldstyles.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, доступное только для чтения, больше не имеет пунктирной границы: