css - JavaFX 使用 CSS : First TextField turns black when it has text inside of it

Question

我的 UI 有一个奇怪的问题。请注意，这只发生在第一个 TextField 上，因为我尝试删除我认为有此问题的 TextField，但它只将问题传递到它下面的 TextField 上。我很确定这是一个 CSS 问题，但是，没有警告或错误，但我有点好奇为什么它只影响它看到的第一个 TextField。截图如下:

没有 Input 时看起来没问题。 有输入时变黑。 每当我将鼠标悬停在第一个文本字段上时(光标不仅显示在屏幕截图中)。

//CSS代码

    .root {
        background_color: #252525;
        scroll_pane_background_color: background_color;
        tab_pane_background_color: #2e2e2e;
    }


    .background{
        -fx-background-color: #252525;
    }

    .header{
        -fx-text-fill: white;
    }

    .item-title{
        -fx-text-fill: white;
        -fx-opacity: 0.6;
    }



    .menu-button,
    .choice-box,
    .combo-box-base,
    .split-menu-button {
        arrow_color: white;
    }


    .list-view, .table-view, .tree-view, .tree-table-view {
        cell_hover_color: #515151;
        cell_pressed_color: #3e3e3e;

        cell_selected_unfocused_color: cell_hover_color;

        cell_selected_color: derive(accent_color, -35%);
        cell_selected_hover_color: derive(accent_color, -20%);
        cell_selected_pressed_color: derive(accent_color, 60%);
    }


    .label {
        text_color: white;
    }


    .button, .toggle-button {
        button_background_color: #333333;
        background_pressed_color: #666666;

        border_hover_color: #858585;

        text_color: white;
        default_button_text_color: white;

        focus_ring_border_color: white;
    }

    .button {
        border_hover_default_color: derive(accent_color, 70%);
    }

    .toggle-button {
        border_hover_selected_color: derive(accent_color, 70%);
    }


    .check-box {
        text_color: white;

        box_background_color: #111;
        box_border_color: #cccccc;
        box_border_hover_color: white;

        indeterminate_mark_color: #cccccc;
        indeterminate_box_pressed_color: #111;

        focus_ring_color: white;
    }

    .check-box:indeterminate:hover > .box > .mark {
        -fx-background-color: white;
    }


    .check-box:focused:hover > .box{
        -fx-border-color: focus_ring_color, box_border_hover_color;
    }



    .hyperlink {
        hyperlink_hover_color: derive(accent_color, 25%);
        hyperlink_pressed_color: derive(accent_color, -15%);

        hyperlink_disabled_color: #999999;
    }

    .hyperlink:disabled {
        -fx-opacity: 0.5;
    }



    .radio-button {
        text_color: white;

        radio_background_color: #111;
        background_pressed_color: #111;

        border_color: #cccccc;
        border_hover_color: white;

        dot_color: #111;
        dot_selected_color: #cccccc;
        dot_selected_hover_color: white;

        focus_ring_color: white;
    }



    .tooltip {
        tooltip_background_color: #2b2b2b;
        border_color: #767676;
        text_color: white;
    }



    .tool-bar {
        background_color: #252526;
        button_hover_color: #444;
        button_pressed_color: #333333;
    }



    .scroll-bar {
        thumb_color: #52565a;
        thumb_hover_color: #7d8183;
        thumb_pressed_color: #a9abad;

        track_color: #29292a;

        inc_dec_button_color: #2a2d30;
        inc_dec_button_hover_color: #3c4145;
        inc_dec_button_pressed_color: #a8abac;

        arrow_color: white;
        arrow_pressed_color: #111;
    }

    .scroll-pane {
        corner_background_color: #29292a;
    }



    .combo-box-base {
        text_color: white;

        border_color: #666666;
        border_hover_color: #999999;
        border_focused_color: white;
        border_pressed_color: #666666;


        combo_box_background_color: #111;
        background_pressed_color: #333333;


        combo_box_editable_button_hover_color: #444;
        combo_box_editable_focused_button_hover_color: #e6e6e6;
        combo_box_editable_focused_background_color: white;
        combo_box_editable_focused_arrow_color: #111;

        list_cell_color: #2b2b2b;
        list_cell_hover_color: #545454;

        list_cell_border_color: #767676;
    }



    .rating {
        star_color: #6d6d6d;
    }
    .rating:disabled{
        -fx-opacity: .8;
    }


    .text-input {
        border_color: #666;
        border_hover_color: #999;
        border_disabled_color: #333;

        text_input_background_color: #111;
        background_focused_color: #fff;
        background_hover_color: #111;
        background_disabled_color: #111;

        text_color: white;
        text_focused_color: #111;
        text_disabled_color: #333;
        prompt_text_color: #777;

        highlight_color: accent_color;
        highlighted_text_color: white;

        graphic_color: #747474;
    }



    .menu-button {
        menu_button_background_color: #333;
        menu_button_text_color: white;
        menu_border_hover_color: #858585;
        menu_button_pressed_color: #666;
    }



    .progress-bar {
        progress_background_color: #333;
    }


    .slider {
        track_hover_color: #999999;
        thumb_hover_color: #f2f2f2;

        thumb_pressed_color: #767676;
    }


    .toggle-switch {
        text_color: white;


        unselected_color: #111;
        unselected_border_color: #cccccc;
        thumb_unselected_color: #cccccc;

        unselected_hover_color: #111;
        unselected_border_hover_color: white;
        thumb_unselected_hover_color: white;


        selected_color: accent_color;
        selected_border_color: accent_color;
        thumb_selected_color: white;
        /* --    hover */
        selected_hover_color: derive(accent_color, -20%);

        pressed_color: #999999;
        pressed_border_color: pressed_color;
        thumb_pressed_color: white;
    }


    .spinner {
        spinner_background_color: #4a4a4a;

        arrow_button_hover_color: #3c4145;
        arrow_button_pressed_color: #a8abac;

        arrow_color: #999;
        arrow_pressed_color: #5e6060;
    }

    .spinner > .text-field {
        text_color: white;
    }



    .date-picker {
        graphic_color: white;
        graphic_focused_color: #111;
        graphic_disabled_color: #333;

        text_color: white;
        text_focused_color: #111;

        text_selected_color: white;
        text_hover_color: white;

        text_days_from_other_months_color: #7c7c7c;

        date_picker_background_color: #111;
        background_focused_color: #fff;
        background_hover_color: date_picker_background_color;

        border_color: #616161;
        border_hover_color: #999999;

        popup_border_color: #111;

        spinner_button_hover_color: #999;

        cell_background_color: #111;

        day_cell_background_color: #1f1f1f;
        day_cell_border_hover_color: #999;

        day_cell_background_days_from_other_months_color: #2b2b2b;

        today_border_color: derive(accent_color, -60%);

        text_field_disabled_background_color: #111;
    }



    .choice-box {
        text_color: white;

        border_color: #666666;
        border_hover_color: #999999;
        border_focused_color: white;
        border_pressed_color: #666666;

        choice_box_background_color: #111;
        background_pressed_color: #333333;
    }



    .list-view {
        text_color: white;

        list_view_background_color: #333;
        border_color: #171717;
    }



    .table-view {
        table_background_color: #333;
        table_view_border_color: #171717;

        text_color: white;
        hover_text_color: white;
        selected_text_color: white;
        selected_unfocused_text_color: white;

        sort_arrow_color: white;
        show_hide_image_color: sort_arrow_color;
    }


    .check-box-table-cell {
        table_check_box_cell_box_background_color: transparent;
        table_check_box_cell_box_border_color: white;
        table_check_box_cell_mark_color: white;
    }


    .tree-view {
        tree_view_background_color: #333;

        text_color: white;
        text_selected_color: white;
        text_hover_color: text_color;

        arrow_color: white;
        arrow__hover_color: text_hover_color;
        arrow_selected_hover_color: text_selected_color;
    }


    .tree-table-view {
        table_border_color: #171717;
        table_background_color: #333;

        table_text_color: #fff;
        table_text_selected_color: #fff;

        table_column_vline_color: #3e3e3e;

        /* Color of button that filters columns */
        show_hide_image_color: white;
    }


    .tab-pane {
        tab_pane_bottom_border_color: tab_pane_background_color;

        tab_text_color: white;
        tab_text_hover_color: derive(accent_color, 50%);
        tab_text_selected_hover_color: derive(accent_color, 30%);

        tab_selected_background_color: #1e1e1e;
        tab_selected_border_color: #1e1e1e;

        more_button_hover_color: #444;
        more_button_pressed_color: #333333;
        more_button_icon_color: white;
    }


    .context-menu {
        menu_background_color: #2b2b2b;
        context_menu_border_color: #777677;

        separator_color: #555555;
    }



    .menu-bar {
        menu_bar_background_color: #111;

        text_color: white;

        menu_button_hover_color: #404040;
    }

    .menu-item {
        text_color: white;

        menu_background_color: #2b2b2b;



  graphic_color: #aaaaaa;

    hover_color: #404040;
    pressed_color: #555555;
}


.titled-pane {
    text_color: white;

    title_background_color: #1f1f1f;
    title_background_hover_color: #4a4a4a;

    border_color: #494949;

    arrow_color: white;

    content_background_color: #111;
}


.progress-indicator {
    text_color: white;
}



.separator{
    border_color: #777;
}


 .split-menu-button {
    button_background_color: #333333;
    background_pressed_color: #666666;

    border_hover_color: #858585;

    text_color: white;

    focus_ring_border_color: white;
 }


.split-pane {
    background_color: #333;
    border_color: #252525;
}
Pane, AnchorPane, BorderPane, DialogPane, FlowPane, GridPane, HBox, StackPane, TextFlow, TilePane, VBox {
    -fx-background-color: background_color;
}

//FXML代码

   <AnchorPane fx:id="anchorPaneSignUp" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="UserInterface.SignUpUIController">
           <children>
              <TextField fx:id="signUpName" layoutX="221.0" layoutY="63.0" prefHeight="15.0" prefWidth="152.0" promptText="Username">
                 <font>
                    <Font name="System Italic" size="12.0" />
                 </font>
              </TextField>
              <TextField fx:id="signUpContactNumber" layoutX="222.30020141601562" layoutY="123.0" promptText="Contact Number">
                 <font>
                    <Font name="System Italic" size="12.0" />
                 </font>
              </TextField>
              <TextField fx:id="signUpEmailAd" layoutX="222.0" layoutY="185.0" promptText="Email Address">
                 <font>
                    <Font name="System Italic" size="12.0" />
                 </font>
              </TextField>
              <TextField fx:id="signUpPW" layoutX="221.0" layoutY="238.0" promptText="Password">
                 <font>
                    <Font name="System Italic" size="12.0" />
                 </font>
              </TextField>
              <PasswordField fx:id="signUpPWVerify" layoutX="222.0" layoutY="297.0" promptText="Confirm Password">
                 <font>
                    <Font name="System Italic" size="12.0" />
                 </font>
              </PasswordField>
              <Button fx:id="addContactBtn" layoutX="273.0" layoutY="348.0" mnemonicParsing="false" onAction="#add" text="OK" />
              <ComboBox layoutX="399.0" layoutY="185.0" prefHeight="31.0" prefWidth="124.0" promptText="gmail.com">
                 <items>

                 </items>
                 <padding>
                    <Insets left="1.0" />
                 </padding>
              </ComboBox>
              <Label graphicTextGap="0.0" layoutX="381.0" layoutY="187.0" lineSpacing="1.0" prefHeight="26.0" prefWidth="17.0" text="\@">
                 <font>
                    <Font size="17.0" />
                 </font>
              </Label>
           </children>
           <cursor>
              <Cursor fx:constant="DISAPPEAR" />
           </cursor>
           <stylesheets>
              <URL value="@../style.css" />
              <URL value="@../JMetroBase.css" />
           </stylesheets>
        </AnchorPane>

Answer 1

我使用了你的 fxml 和你的 css。行为是所有字段的行为都像您第一次描述的那样。

从 github page 添加 Jmetro 基础 css 后

所有字段的行为都如您所愿:

看来，您在 Controller 中有一些代码可以改变行为？或者下载最新的 JMetro.css 并查看是否是问题所在。但在这个阶段它不可重现。