☰

JavaFX ボタンのデフォルトの境界線の輝き (選択時) を削除するにはどうすればよいですか? 質問する

tag-icon • tag-icon javafx
JavaFX ボタンのデフォルトの境界線の輝き (選択時) を削除するにはどうすればよいですか? 質問する

JavaFX ボタンが選択されたときにデフォルトで表示される境界線の輝き (下のスクリーンショットを参照) を削除しようとしています。

青い境界線は、ボタンが選択されたときのJavaFXのデフォルトのスタイルです。

私もこれを CSS を使用して行いたいのですが、メインの JavaFX スクリプト内から宣言的に行うつもりはありません。しかし、境界線を削除するためにどの CSS プロパティを使用する必要があるのか​​ (つまり、0 に設定する必要があるのか​​) がわからず困っています。

ベストアンサー1

設定-fx-focus-color

問題に対する適切な解決策を選択できるように、回答の更新をすべて確認してください。

コード内の任意のコントロールからフォーカス リングの表示を削除するには、次の手順を実行します。

control.setStyle("-fx-focus-color: transparent;");

すべてのコントロールのフォーカス リングを削除するには、スタイルシートを適用します。

.root { -fx-focus-color: transparent; }

すべてのボタンのリングのみを削除するには、次を使用します。

.button { -fx-focus-color: transparent; }

-fx-focus-colorフォーカス リングを削除するためにインセットの奇妙な組み合わせに頼るよりも、属性設定の方が簡単だと思います。

さらに、同じ設定を使用して、フォーカスリングを などの別の色に変更することもできます-fx-focus-color: firebrick。

2015年1月20日更新：追加-fx-faint-focus-color

JavaFX 8には新しいデフォルトのユーザーエージェントスタイルシート（モデナ）。この新しいユーザー エージェント スタイルシートには、フォーカス ハイライトの追加設定が付属しています: -fx-faint-focus-color。Java 8 アプリケーションの場合、フォーカス リングの痕跡をすべて削除するには、との両方を透明に設定する必要があります-fx-focus-color。-fx-faint-focus-colorこの質問に対する good4m の回答を参照してください。

2015年12月10日更新: 特定のコントロールの正確なレンダリングを維持

この回答で以前に推奨されているように、フォーカスの色のみを透明に設定すると、一部のコントロールでは、コントロールがフォーカスされているときとフォーカスされていないときの間に微妙な違いが見られる場合があります。多くのアプリケーションではこれは問題にはならず、フォーカスの色を透明に設定するだけで十分です。

詳細情報と代替ソリューションについては、James_Dの回答を参照してください。JavaFX入力フィールドから青い枠を削除するそしてJens Deterのブログ記事JavaFX でフォーカスのハイライトを削除する方法残念ながら、Jens Deter のブログへのリンクには、迷惑なポップアップが表示されることに注意してください。

2023年9月更新: より幅広いコントロールの正確なレンダリングを維持

焦点を絞ったものを見るためにその通りフォーカスされていないものと同様に、:focusedフォーカスされているときもフォーカスされていないときも同じ CSS ルールを使用してスタイルを定義します。以下の CSS ルールは、多くの一般的な JavaFX コントロールに対してこのアプローチを示しています。

-fx-focus-colorおよび値を設定するだけの場合とは異なり-fx-faint-focus-color、これらのルールにより、フォーカスされた項目のサイズ、パディング、背景などのすべての側面が、項目がフォーカスされているかどうかに関係なく同じままになります。

JavaFX は、通常、追加のレイヤー化された背景によってフォーカス表示を実装します。フォーカス リングをレンダリングするために、コントロールの背景の数とサイズが調整されるため、フォーカス リングを透明に設定するだけでは、コントロールのレンダリングが若干異なります。代わりに、フォーカス CSS ルールをオーバーライドして、コントロールの背景を一切調整しないようにすると、コントロールは、フォーカスされているときもフォーカスされていないときも同じに見えます。

以下のスタイル シートは、 javafx コントロール jar ファイルにあるスタイル シート:focusedの CSS ルールの多くを再定義することによって作成されましたmodena.css。新しいルールは、フォーカスされていないルールと同じ値になるように定義されています:focused。

スタイルシートはコピー＆ペーストして手動で項目を変更することで生成しました。完全にテストされていないため、エラーがある可能性があります（エラーがある場合は、投稿を編集して修正してください）。

リストは現在意図的に不完全ですが、ここに示されていない特定の JavaFX コントロールにとって重要なルールがあり、そのルールが正しく最適であると確信している場合は、サンプル スタイル シートを編集して追加のルールを追加してください。特に、テーブルのスタイル フォーカス処理の削除は省略されています。これは非常に複雑になる可能性があるためです。これは別の質問と回答で処理できる可能性があります。

テンプレートに使用された JavaFX バージョンは 20.0.2 でした。将来の JavaFX バージョンではルールが変わる可能性があり、以下のルールはそれに合わせて調整する必要があります。

ほとんどの場合、フォーカス リングを削除するのは良い考えではないと思うので、これを行わないことをお勧めします。特に、アプリケーション全体のすべてのコントロールのフォーカス ルールを削除することは、ユーザーを混乱させる可能性があるため、お勧めできません。ただし、それが必要な機能である場合は、調整するコントロールに以下の CSS ルールの抜粋を選択的に適用することをお勧めします。

/* ====   BUTTON LIKE THINGS   ============================================== */
.button:focused,
.toggle-button:focused,
.radio-button:focused > .radio,
.check-box:focused > .box,
.menu-button:focused,
.choice-box:focused,
.color-picker.split-button:focused > .color-picker-label,
.combo-box-base:focused,
.slider:focused .thumb {
    -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;
}

/* ====   BOX LIKE THINGS   ================================================= */
.scroll-pane:focused,
.split-pane:focused,
.list-view:focused,
.tree-view:focused,
.table-view:focused,
.tree-table-view:focused,
.html-editor:contains-focus {
    -fx-background-color: -fx-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-padding: 1;
}

.scroll-pane:focused,
.split-pane:focused {
    -fx-background-color: -fx-box-border, -fx-background;
}

/* ====   PILL BUTTONS   ==================================================== */

.button.left-pill:focused,
.toggle-button.left-pill:focused {
    -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
    -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 1 ;
}
.button.center-pill:focused,
.toggle-button.center-pill:focused {
    -fx-background-radius: 0;
    -fx-background-insets: 0 0 -1 0, 0 0 0 0, 1 1 1 0, 2 2 2 1 ;
}
.button.right-pill:focused,
.toggle-button.right-pill:focused {
    -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
    -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 1 ;
}

/* ====   SELECTED TOGGLE   ================================================= */

.toggle-button:selected:focused {
    -fx-background-color:
            -fx-shadow-highlight-color,
            linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border),
            linear-gradient(to bottom,
            derive(-fx-color, -22%) 0%,
            derive(-fx-color, -13%) 20%,
            derive(-fx-color, -11%) 50%);
    -fx-background-insets: 0 0 -1 0, 0, 1;
}

/* ====   RADIO             ================================================= */

.radio-button:focused > .radio  {
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
    -fx-padding: 0.333333em; /* 4 -- padding from outside edge to the inner black dot */
}

/* ====   HYPERLINK         ================================================= */

.hyperlink:focused {
    -fx-border-color: transparent;
    -fx-border-width: 0px;
}

/* ====   SPLIT MENU BUTTON ================================================= */

.split-menu-button:focused {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border;
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-background-radius: 3, 3;
}

.split-menu-button:focused > .label {
    -fx-background-color: -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1 0 1 1, 2 1 2 2;
    -fx-background-radius: 2 0 0 2, 1 0 0 1;
}
.split-menu-button:focused > .arrow-button {
    -fx-background-color: -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1, 2;
    -fx-background-radius: 0 2 2 0, 0 1 1 0;
}

/* ====   TOOLBAR           ================================================= */

.tool-bar-overflow-button:focused > .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
}

/* ====   SCROLLBAR         ================================================= */

.scroll-bar:horizontal:focused {
    -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
    -fx-background-insets: 0, 1 0 1 0;
}
.scroll-bar:vertical:focused {
    -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
    -fx-background-insets: 0, 0 1 0 1;
}

/* ====   TEXT INPUT        ================================================= */

.text-input:focused {
    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
    -fx-highlight-text-fill: -fx-text-inner-color;
    -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-prompt-text-fill: transparent;
}

/* ====   TEXT AREA        ================================================= */

.text-area:focused .content {
    -fx-background-color:
            linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
    -fx-background-insets: 0;
    -fx-background-radius: 2;
}

/* ====   MENU             ================================================= */

.menu:focused > .right-container > .arrow {
    -fx-background-color: -fx-mark-color;
}

/* ====   MENU ITEM        ================================================= */

.menu-item:focused {
    -fx-background: -fx-selection-bar;
    -fx-background-color: transparent;
    -fx-text-fill:  -fx-text-background-color;
}
.menu-item:focused > .label {
    -fx-text-fill: -fx-text-base-color;
}

おすすめ記事