How to maintain the appearance of a choicebox in JavaFX 8 both before and after selection (without focus)

Is there a way to make my choicebox maintain the same appearance before and after a user makes a selection, without showing any focus indicator? I have tried adjusting the -fx-focus-color and -fx-faint-focus-color properties based on web searches, but I can't seem to achieve consistent results. Using transparent color seems to work best for me as it avoids any unwanted glow around the choicebox after a selection.

default look, no css settings

before select:https://i.sstatic.net/UKLOi.png
after select:https://i.sstatic.net/O1YH0.png

-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;

before select:https://i.sstatic.net/IUwQe.png
after select:https://i.sstatic.net/WiYQp.png

-fx-faint-focus-color: transparent;

before select:https://i.sstatic.net/b82LA.png
after select:https://i.sstatic.net/HwzL6.png

-fx-focus-color: transparent;

before select:https://i.sstatic.net/WIfxV.png
after select:https://i.sstatic.net/HBlIB.png

javacssjavafxjavafx-8

Answer №1

Give this a shot.

.choice-box:focused {
    -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;
}

If you want to check out the default css (modena.css), you can find it here in OpenJDK/openjfx/8/master. The above code showcases the variations between .choice-box and .choice-box:focused.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on positioning content beneath a fixed header or navigation bar when viewed in a web browser

Hi, I'm having an issue with creating a fixed header using HTML and CSS. When I set my header to be in a fixed position, it covers up the content below it. I want the content to be positioned under the header when the page is loaded. Additionally, I&a ...

javascripthtmlcss

"Exploring the world of CSS3: Arrow shapes and animated effects

Looking at the image provided, my task is to create and animate it. I was considering using CSS3 border-radius instead of an actual image. Below are the HTML and CSS code that I have so far. The animation I envision involves the arrow gradually appearing ...

jqueryhtmlcssjquery-animate

Issue with :visited pseudo-class not functioning as intended

My code includes all four basic pseudo-classes, and they all seem to be working fine except for the :visited pseudo-class. The color property doesn't function properly, and the background property appears to be inactive. I'm not sure what the iss ...

htmlcss

Is there a way to retrieve the http response body in Java when the request fails?

Is there a way to retrieve the response body when an http request results in a status code of 400 using java.net? Currently, I am utilizing java.net to establish an HTTP connection and here's the code I have: InputStream response = new URL("http ...

javahttphttpurlconnection

How come the picture extends beyond the borders of its parent container when I expand the width?

Despite my efforts, I haven't been able to figure this out successfully. My goal is to align the text elements next to the image just like in the example picture below. Initially, I achieved this using absolute positioning. absolute positioning Howe ...

htmlcssflexboxpositioning

The Rails application is using SASS to import CSS from external gems, but it is not processing the Sprockets

While searching for a solution to this issue, I have come up empty-handed using my usual Google search skills. In my Rails 4 application, I am utilizing SASS for my CSS. I have dependencies on certain gems that contain CSS files which I must use. For inst ...

cssruby-on-railssasssprocketssass-rails

implementing a smooth transition effect for image changes upon hover

I've been working on a React project where I created a card that changes its image when hovered over. I wanted to add a smoother transition effect to the image change using transition: opacity 0.25s ease-in-out;, but it doesn't seem to be working ...

javascriptcssreactjscss-transitions

How do you position items in the center and lower right corner of a flexbox that takes up the entire

One feature on my website is a flex box that takes up the entire window with a width of 100% and a height of 100vh. Within this flex box, I've centered text and a button, but now I'd like to add a footer to the page. If I simply place the footer ...

cssruby-on-railsrubywebflexbox

Problem with setting the content view

Currently, I am following tutorials from various Ebooks and one of them involves creating a game called Crazy Eights. At this point, I am just starting out with the tutorial. So far, I have successfully set up the project, added necessary details in the Ma ...

javaandroideclipsesdk

CSS: "Magazine Writer" design featuring a floating box and diverse HTML elements

OBJECTIVE: My aim is to replicate a "newspaper author" layout using HTML/CSS: SOLUTION/ISSUE: I floated a box to the left and added text and other content that wraps around it. However, some of the content's background-color and CSS effects are overf ...

htmlcsslayoutcss-float

Stop the delay in a postDelayed handler/runnable and resume the paused code without waiting

Scenario: In my application, I have a 4 stage activity which involves using a postdelayed handler to introduce pauses with two additional nested postdelays. Sequence: stage1 |CODE ACTION| stage2 |CODE ACTION| stage3 |CODE ACTION| stage4 Description of s ...

javaandroidhandlercountdownpostdelayed

Styling in CSS to ensure scrollbar is constantly displayed without narrowing the container's width

Is it possible to have a vertically scrollable div with an always visible scrollbar without the scrollbar affecting the width of the elements inside? I attempted some CSS modifications, but the scrollbar still reduced the available width of the div. Is th ...

htmlcssstylesheet

Steps for choosing a text from the autocomplete textbox with Selenium

I am looking to input text into an autocomplete textbox, then choose an option from the suggestions provided and click on it. Here is the code I have attempted: public static void main(String[] args) throws InterruptedException { // TODO Auto-generat ...

javaseleniumselenium-webdriverbrowser-automation

Modify CSS based on the size of the containing iframe dynamically

My website is embedded on partner sites through an iframe, but the length of my new website exceeds the space allocated in the iframes set by my partners (who have disabled scrolling). Since I am unable to adjust the settings on my partner sites, I need t ...

javascripthtmlcssiframe

Error Message: Unresolved reference to a JLabel Array

I wish to dynamically create JLabels with icons in a for loop. Here is the code snippet I am using: final JLabel[] box = new JLabel[27]; for(int i = 0; i < 25; i++){ int j = 1; String r = "case" + j + ".png"; box[i] = new JLabel(new ...

javaarraysswingnullpointerexceptionjlabel

Adjust the font size in CSS based on a specified range of values

When the screen size is small (mobile), the font size is fixed at 14px. On really large screens, the font size is set to 18px, ensuring it never goes below 14px or above 18px>. This is achieved using media queries.</p> <p>However, for the i ...

cssfont-size

Populating an array with a function

Having some trouble with a revision question in the lab. The task is to write a static method that initializes an array of integers named numList. This method should take the size of the array as an integer parameter and return the array. In this array, ev ...

javaarraysoopmethods

Steps for Implementing a Delay on Bootstrap Dropdown Hover

Is there a way to create a delay for the bootstrap dropdown feature while ensuring that it still appears on hover? If you want to test this, click here: http://www.bootply.com/YcVBzvXqrR This is the HTML code I'm using: <div class="container"&g ...

javascriptjqueryhtmlcsstwitter-bootstrap

Error message: Android encountered a Force Close due to a java.lang.ClassCastException. The app HttpGetAndroidExample could not be cast to android.app

Receiving the force close error below: java.lang.ClassCastException: com.example.httpgetandroidexample.HttpGetAndroidExample cannot be cast to android.app Attempting to run the given code, but unsure why. package com.example.httpgetandroidexample; impor ...

javaandroidjsoupforceclose

Tips on adding space between a material icon and its corresponding description

I have a design that needs some adjustments. The material icon is too close to the description, and I attempted to create padding by adding the following CSS: .location-secondary-info span:first-child { padding-right: 5px; } However, this change did no ...

cssreactjssassgoogle-material-icons