ActiveになってBorderが強調されるのをならないようにしたい

Question

ButtonやTextFieldなどActiveになると青い枠線で囲まれて、Activeになっていることが強調されますが
それによって微妙に配置がずれたり、デザイン上好ましくないときがあります。

ActiveになってもBorderが強調されないようにcssに記述するとこはできますでしょうか？

ご存知の方、いらっしゃいましたらご教示いただければ助かります。
よろしくお願いします。

Answer 1

それによって微妙に配置がずれたり、デザイン上好ましくないときがあります。

確かにこれは「うーん」と感じたことあります。ただ自分なんぞはあきらめてしまう口ですが・・・

Borderが強調されないようにcssに記述

自分が思いつくのはアプリケーションのスタイルシートでデフォルトのスタイルを打ち消すような定義を上書きすることぐらいです。デフォルトのスタイルはJavaのインストール先のjarファイルの中に入っており、例えばWindowsですと

C:\Program Files\Java\jre1.8.0_162\lib\ext\jfxrt.jar

などに入っています。(Java9からは提供形態が変化しているのでこういう場所ではないと思いますが)

このjarファイルからcssを探すといくつか入ってますね。

$ jar tvf jfxrt.jar | fgrep '.css'
com/sun/deploy/uitoolkit/impl/fx/ui/deploydialogs.css
com/sun/javafx/scene/control/skin/caspian/caspian-no-transparency.css
com/sun/javafx/scene/control/skin/caspian/caspian.css
com/sun/javafx/scene/control/skin/caspian/embedded-qvga.css
com/sun/javafx/scene/control/skin/caspian/embedded.css
com/sun/javafx/scene/control/skin/caspian/fxvk.css
com/sun/javafx/scene/control/skin/caspian/highcontrast.css
com/sun/javafx/scene/control/skin/caspian/two-level-focus.css
com/sun/javafx/scene/control/skin/modena/blackOnWhite.css
com/sun/javafx/scene/control/skin/modena/modena-embedded-performance.css
com/sun/javafx/scene/control/skin/modena/modena-no-transparency.css
com/sun/javafx/scene/control/skin/modena/modena.css   # <==多分これ?
com/sun/javafx/scene/control/skin/modena/touch.css
com/sun/javafx/scene/control/skin/modena/two-level-focus.css
com/sun/javafx/scene/control/skin/modena/whiteOnBlack.css
com/sun/javafx/scene/control/skin/modena/yellowOnBlack.css

このうちmodena.cssにデフォルトの外観のスタイルが定義されていると思います。
modena.cssで使われているpseudo classですが、HTMLのスタイルシートとJavaFXのそれは微妙に仕様が違っているので、以下を参考にするとよいと思います。

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#scrollbar

例えばそこには

The ":active" and ":focus" dynamic pseudo‑classes are not supported. However, Nodes do support the ":pressed" and ":focused" pseudo‑classes, which are similar.

などといったことが書かれています。

Comments

[XCUBE]

ありがとうございます。
modena.cssを見てTabPane に -fx-focus-color: initial; を適用したところ Tabに関して強調されなくなりました。
TextFieldについても同じく -fx-focus-color: initial; を適用させたらアクティブ時に背景色が透明になりましたが配置はずれませんでした。
それで改めて-fx-background-color:WHITE; で色を付けたらまたずれるようになりました。
TabPaneについては理想通りになりましたが、TextFieldについてはもう少し試行錯誤してみます。

[KSwordOfHaste]

色を付けただけでレイアウトに影響があるという点ですが、JavaFX固有の話なのかHTMLのスタイルでも似たことが起きるのかちょっと興味がわきました。難しいですね。

[XCUBE]

レイアウトが微妙にずれるのはHBoxなどの中にTextFieldを配置した場合になんですが、ActiveによりBorderが太くなるからと勝手に解釈していました。
-fx-focus-color: initial; したときに背景色が透明になるのはよくわかりません。
さらに-fx-background-color:WHITE; にしたらずれるのはBorderとは関係なさそうなので更にわかりません。
狙いがあってHBoxの中にTextFieldを配置しているのですが、もしユーザがずれを気にするようでしたらPaneなどに変えて対応したいと思っています。

[KSwordOfHaste]

関係ないかも知れませんが、JavaFXでレイアウトを作成している際に「おや」と思うことがたまにあります。

例えばHBoxの中にTextFieldなどを並べた時、paddingを指定してないと(SceneBuilderではpadding=0,0,0,0と表示されるにもかかわらず)HBoxとTextFieldの間に一定の隙間が空いてしまうなどです。SceneBuilderでHBoxのpaddingを(1,0,0,0)のような値に設定すると上に1単位の隙間はあるものの他の辺の隙間がなくなるのです。

きちんと調べてはいないのですが、Modenaのcss定義の関係で「どこかにデフォルトのpaddingが指定されているのだろうか？」なんて想像しています。つまりSceneBuilderで自分で明示するとModenaのcssを上書きするために隙間が空かなくなるのだろうと思ったわけです。

「paddingを明示的に指定すれば回避できる」のをいいことにちゃんと調べてないのですが、本来ならModenaの定義を確認しておくべきなのでしょうね・・・

[XCUBE]

そうですか。paddingで回避できたのですね。
こちらも試しにHBoxにpaddingを設定してみましたが、回避できませんでした。
Nodeの階層だったり他の要因で回避できたりできなかったりなのでしょうね。
色々と情報ありがとうございました。