JavaFX ComboBox CSSスタイル

Question

私は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の書き込みに使用されていないです。コンボボックスで枠線が定義されていませんか？だから私は境界をオーバーライドし、テキストフィールドの境界線が何であるかを知る必要がありますか？

Answer 1

ComboBoxinherits its CSS styleをComboBoxBaseから。

ComboBoxコントロールは、すべてのプロパティと ComboBoxBaseの擬似クラスを有しています。

ComboBoxBaseのデフォルトのCSSスタイルクラスは次のように定義されています。このスタイルクラスがちょうど白に内部を設定し

.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; 
} 

：のようにあなたはこのスタイルクラスを上書きすることができます

.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; 
} 

境界線は実際には変更されません（最後の2つのプロパティを削除すると、無地の白い境界線が表示されますComboBox）。

---

注：

が.combo-box-baseまたは.combo-boxスタイル・クラスを上書きのみComboBox ESを使用した場合と同等です。

.combo-box-baseスタイル・クラスを使用するには答えではなく、他のいずれかでの理由は、このようなColorPickerやDatePickerとしても.combo-box-baseスタイルクラスを継承する他のコントロールがあることです。 .combo-box-baseを上書きすると、これらのすべてのコントロールが同じスタイルを共有するため、統一されたデザインが得られます。

Answer 2

あなたは国境を制御するには、次のプロパティを追加することができます。

-fx-border-color: #D3D3D3 
-fx-border-width: 1 1 1 1