Почему -fx-border-color сбрасывает радиус границы TextField?

Я хочу изменить цвет фона и границы TextField, используя JavaFX CSS. Я не понимаю, почему -fx-border-color сбрасывает радиус границы TextField?

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

Как видите, второй TextField не имеет радиуса границы.

образец/style.css:

.validation-error {
    -fx-background-color: #FFF0F0;
    -fx-border-color: #DBB1B1;
}

образец/Main.java

package sample;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        TextField txtWithoutStyle = new TextField();
        txtWithoutStyle.setText("Without Style");

        TextField txtWithStyle = new TextField();
        txtWithStyle.setText("With Style");
        txtWithStyle.getStyleClass().add("validation-error");

        VBox root = new VBox();
        root.setPadding(new Insets(14));
        root.setSpacing(14);
        root.getChildren().addAll(txtWithoutStyle, txtWithStyle);
        root.getStylesheets().add("/sample/style.css");

        Scene scene = new Scene(root, 300, 275);

        primaryStage.setTitle("Hello World");
        primaryStage.setScene(scene);
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

Обновление 1

Дополнительный вопрос: зачем -fx-background-color удалять границу TextField (просто удалите -fx-border-color из style.css, чтобы воспроизвести ее)?


javafx javafx-8 javafx-css
person Maxim    schedule 01.04.2015    source источник

Ответы (1)


arrow_upward
6
arrow_downward

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

Некоторые настройки для TextInputControl из таблицы стилей по умолчанию:

-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
    linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 0, 1;
-fx-background-radius: 3, 2;

Это в основном устанавливает два цвета фона (оба определяются линейным градиентом), один («внешний») с цветом на основе -fx-text-box-border, а другой с цветом на основе -fx-control-inner-background. «Внешний» фон находится за пределами «внутреннего» фона, потому что они имеют вставки 0 и 1 соответственно; изогнутый край к результирующей видимой границе создается за счет радиусов 3 и 2 для каждого фона соответственно.

Это, по крайней мере, анекдотично, намного эффективнее, чем использование реальных границ в CSS, поэтому этот метод выбран из соображений производительности.

Таким образом, чтобы сохранить радиус границы, вы можете использовать ту же технику и просто переопределить два цвета фона:

.validation-error {
    -fx-background-color: #DBB1B1, #FFF0F0 ;
 }

Обратите внимание, что вы также можете просто заменить «искомые цвета», что также сохранит используемые тонкие линейные градиенты:

.validation-error {
    -fx-text-box-border: #DBB1B1 ;
    -fx-control-inner-background: #FFF0F0 ;
  }

Для выделения в фокусе по умолчанию используются цвета с именами -fx-focus-color и -fx-faint-focus-color: поэтому в последней версии вы, вероятно, захотите переопределить и их:

.validation-error {
    -fx-text-box-border: #DBB1B1 ;
    -fx-control-inner-background: #FFF0F0 ;
    -fx-focus-color: #FF2020 ;
    -fx-faint-focus-color: #FF202020 ;
  }
person James_D    schedule 01.04.2015