![\"button_hover\"](\"http:\/\/www.jensd.de\/wordpress\/wp-content\/uploads\/2014\/07\/button_hover.jpg\")
<\/a><\/p>\nMost posts and tipps regarding this issue suggesting to adding:<\/p>\n
[css]
\n.button:focused {
\n -fx-focus-color: transparent;
\n}
\n[\/css]<\/p>\n
But with this style a glow like this is still left:<\/p>\n
To get rid of this glow also often suggested to play around with But this results in a button rendered with out an outer border:<\/p>\n Compared to the default button style<\/p>\n this is still a kind of “highlighting”:<\/p>\n Why is that? (And why are there actually 4 inset values ?)<\/strong> Having a look at the JavaFX default style as defined by Obviously there is not only one focus color A closer look at the .button:focused pseudo class (in Playing around with some (extreme ;-)) colouring reveals the arrangement:<\/p>\n [css] -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; Getting back to the topic maybe a clent way to remove the focus hightlight is to use the default button styles also for .button:focus (same approach for other controls):<\/p>\n [css] Today I was asked if I know a way to get rid of the focus-highlighting of JavaFX controls (respectively buttons): Most posts and tipps regarding this issue suggesting to adding: [css] .button:focused { -fx-focus-color: transparent; } [\/css] But with this style a glow like this is still left: To get rid of this glow also… <\/span>Continue Reading How to get rid of focus highlighting in JavaFX<\/span><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"footnotes":"","_jetpack_memberships_contains_paid_content":false,"jetpack_publicize_message":"Get rid of focus highlighting in JavaFX","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[32,9,4,8,47,6],"tags":[93,80,76,103,81],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p38FCL-k5","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1245"}],"collection":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1245"}],"version-history":[{"count":24,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1245\/revisions"}],"predecessor-version":[{"id":1866,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1245\/revisions\/1866"}],"wp:attachment":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a><\/p>\n-fx-background-insets<\/code> additionally:
\n[css]
\n.button:focused {
\n -fx-focus-color: transparent;
\n -fx-background-insets: -1.4, 0, 1, 2;
\n}
\n[\/css]<\/p>\n<\/a><\/p>\n<\/a><\/p>\n
\n(note he comment of David Grieve below)<\/p>\nmodena.css<\/strong><\/code> bares some more information:
\n
\n\/* A bright blue for the focus indicator of objects. Typically used as the
\n * first color in -fx-background-color for the \"focused\" pseudo-class. Also
\n * typically used with insets of -1.4 to provide a glowing effect.
\n *\/
\n -fx-focus-color: #f25f29;
\n -fx-faint-focus-color: #f25f2933;
\n<\/code><\/p>\n-fx-focus-color<\/code> but also -fx-faint-focus-color<\/strong><\/code> which is meant to create this glow-effect (that is remaining when setting -fx-focus-color:transparent;<\/code>).<\/p>\nmodena.css<\/code>):
\n[css]
\n.button:focused {
\n -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color;
\n -fx-background-insets: -2, -0.3, 1, 2;
\n -fx-background-radius: 7, 6, 4, 3;
\n}
\n[\/css]<\/p>\n
\n.button:focused {
\n -fx-focus-color: red;
\n -fx-faint-focus-color: green;
\n -fx-inner-border: blue;
\n -fx-body-color: orange;<\/p>\n
\n -fx-background-insets: -2, -0.3, 1, 2;
\n -fx-background-radius: 7, 6, 4, 3;
\n}
\n[\/css]<\/p>\n<\/a><\/p>\n
\n.button:focused {
\n -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
\n -fx-background-insets: 0, 1, 2;
\n -fx-background-radius: 5, 4, 3;
\n}
\n[\/css]<\/p>\n","protected":false},"excerpt":{"rendered":"