JavaFX ComboBox стиль CSS

java css javafx combobox

10316 просмотра

2 ответа

113 Репутация автора

Я создаю небольшое приложение с JavaFX + FXML и пытаюсь реализовать простой CSS, чтобы иметь определенный стиль.

У меня проблема с элементом Combobox. Действительно по умолчанию его цвет серый:

введите описание изображения здесь

И я хотел бы, чтобы он был белым (или прозрачным) и сохранял границы, чтобы соответствовать тому же стилю, что и текстовое поле. Поэтому я попытался установить прозрачный цвет фона, но есть побочный эффект: границы тоже становятся прозрачными!

введите описание изображения здесь

Вот CSS, который я добавил:

.root {
    -fx-font-size: 11pt;
    -fx-font-family: "Verdana";
    -fx-background: #FFFFFF;
}

.normal-label {
    -fx-text-fill: #005EB8;
}

.normal-text-field {
    -fx-text-fill: #333333;
}

.combo-box {
    -fx-background-color: transparent;
}

Я совсем не привык к написанию CSS, поэтому, возможно, я что-то упустил. Это что комбинированный список не определяет границы? Поэтому я должен переопределить границы и выяснить, каковы границы текстового поля?

Автор: Xendar Источник Размещён: 18.07.2016 01:15

Ответы (2)


-1 плюса

19039 Репутация автора

Вы можете добавить следующие свойства для управления границей:

-fx-border-color: #D3D3D3
-fx-border-width: 1 1 1 1
Автор: yamenk Размещён: 18.07.2016 01:59

6 плюса

16239 Репутация автора

Решение

ComboBox наследует свой стиль CSS от ComboBoxBase.

Элемент управления ComboBox имеет все свойства и псевдоклассы ComboBoxBase.

Класс стиля CSS по умолчанию ComboBoxBaseопределяется как:

.combo-box-base {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
    -fx-text-fill: -fx-text-base-color;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
}

Вы можете переписать этот класс стиля как:

.combo-box-base {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, white;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
}

Этот класс стилей просто устанавливает внутреннюю часть на белый, граница на самом деле остается нетронутой (удалите два последних свойства, и тогда вы получите простой белый край без полей ComboBox).


Примечание:

Перезапись .combo-box-baseили .combo-boxклассы стиля эквивалентны, если используются только ComboBoxes.

Причина, по которой в ответе используется .combo-box-baseкласс стилей, а не другой, заключается в том, что существуют другие элементы управления, наследующие также .combo-box-baseкласс стилей, например, ColorPickerи DatePicker. Перезапись .combo-box-baseприводит к тому, что все эти элементы управления используют один и тот же стиль, что приводит к значительно унифицированному дизайну.

Автор: DVarga Размещён: 18.07.2016 03:45
Вопросы из категории :
32x32