I have some classical Button in JavaFX with a box containing some text.
I need buttons without that box, just the text, and when I hover the button or click on the button with mouse, it shall change its color to different.
In JavaFX styling is done by using CSS.
.button{
-fx-border-color: transparent;
-fx-border-width: 0;
-fx-background-radius: 0;
-fx-background-color: transparent;
-fx-font-family:"Segoe UI", Helvetica, Arial, sans-serif;
-fx-font-size: 1em; /* 12 */
-fx-text-fill: #828282;
}
.button:focused {
-fx-border-color: transparent, black;
-fx-border-width: 1, 1;
-fx-border-style: solid, segments(1, 2);
-fx-border-radius: 0, 0;
-fx-border-insets: 1 1 1 1, 0;
}
.button:pressed {
-fx-background-color: black;
-fx-text-fill: white;
}
Add this code to a CSS file, save it to the directory where the source file of the control exists which contains you buttons. Then in this class:
getStylesheets().add(getClass().getResource("nameofyourcssfile.css").toExternalForm());
Then all of the buttons that that object contain will use this style-classes.
Modification on your need is straightforward.
Good tutorial to start:
http://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm
JavaFX has a Hyperlink control which basically has all the functionality you are looking for. It fires ActionEvents in the same way as a button:
Hyperlink button = new Hyperlink("Some text");
button.setOnAction(e -> System.out.println("Hyperlink clicked"));
Like a link in a web page, it will appear in a different color if it has been "visited", i.e. if an action has been fired on it.
This is how you can do it in scenebuilder
Choose the button by clicking on it.
Then in properties->Style Choose "-fx-background-color" and put value as " transparent"
Like this
For anyone who got here looking for a way to remove the default button background, it can be done like this:
button.setBackground(null);
If you want to restyle the button I'd suggest using css like the answer above.
Related
I am trying to make selected button look completely like unselected. All I need is to be able to check whether button was clicked or not. I have tried almost everything but still can't do what I want. Now I have this css. If button is selected its
lower border becomes thicker than others. Is there any possibility to get rid of that, so all the borders of selected button will be the same size?
.button {
-fx-focus-color: transparent;
}
.button:focused {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
.button:hover {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
This is how it looks like
I want to know how to change the inside border color that appears in the text area. I want to delete de blue transparent border inside the red border of the text area. I have checked the modena.css file but I can not find the solution.
What I have in my css file:
.text-area:focused {
-fx-background-color: white;
-fx-border-color: rgba(229,0,0,0.3);
}
TextArea has an additional border/background on its content. To change/get rid of it, you need an additonal style in your css.
Something like
.text-area:focused .content {
-fx-background-color: white;
}
not sure if that's safe enough: it is not documented (or at least I could not find any doc for it), only available as implementation, f.i. in the extracted modena.css
I use the following code to get rid of the auto-generated focus effects of a textarea:
* {
-fx-focus-color: transparent;
-fx-border-style: none;
}
or
.textarea {
-fx-focus-color: transparent;
-fx-border-style: none;
-fx-background-radius: 0.0px;
-fx-border-radius: 0.0px;
}
To get rid of all the default styling, which includes a rounded border...
I've tried to apply the following styles to my CheckBox
.check-box .box {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-white;
}
.check-box:selected .mark {
-fx-background-color: -fx-colour-white;
}
.check-box:selected .box {
-fx-background-color: -fx-blue;
}
The goal is to have a white checkbox with grey border and when the checkbox is checked to have a blue background and white tick. When I apply these styles I get the result I want. However an odd thing happens when doing the following steps:
1- click on checkbox to select
2- click on checkbox to deselect
The checkbox disappears and will only appear again if I click on somewhere else in the pane.
You can see the images below of the checkbox when it is first rendered then when it is checked.
I do not think that the problem comes from your StyleSheets, I think it's due to a bad manipulation in your Java code, you said :
The checkbox disappears and will only appear again if I click on somewhere else in the pane
So start with your Pane, look at whether there is a related event, and concerning the style, your method is almost correct, this is how I would have proceeded :
.check-box .box {
-fx-background-color: white;
-fx-border-color:grey;
-fx-border-radius:3px;
}
.check-box:selected .mark {
-fx-background-color: white;
}
.check-box:selected .box {
-fx-background-color: #28a3f4;
}
Good luck !
I am currently using jfoenix's combobox but my problem is that I can't edit the prompt text color inside of it. It keeps using the default color grey. How can I change the font color of the combobox from grey to white? Is there any way to do this in css?
This is how it looks like:
I hope you can help me out with this.
Thank you in advance.
I am answering my own question for other people's reference. For some reason the font color of the Jfoenix combobox wasn't editable in css. So what I did instead is used the standard combobox provided and simply changed the css to make it look like the Jfoenix combobox.
This is the css style I used for combo-box:
.combo-box,
.choice-box {
-fx-font-size: 12px;
-fx-prompt-text-fill: black;
-fx-text-fill: black;
-fx-background-color: none;
-fx-border-width: 0 0 1 0;
-fx-border-color: #bdbdbd;
-fx-padding: 0 0 3 -8;
}
.combo-box .list-cell:filled:selected .text,
.choice-box .list-cell:filled:selected .text {
-fx-fill: black;
}
.combo-box .arrow,
.choice-box .arrow {
-fx-background-color: #4d4d4d;
}
I figured it out. You just need to add the following line to a css file overriding the jfoenix css.
.jfx-combo-box {
-fx-prompt-text-fill: white;
}
I've got a Button in my FXML file and i give a style to it by below CSS
.button {
-fx-background-color: linear-gradient(#ff5400, #be1d00);
-fx-background-radius: 30;
-fx-background-insets: 0;
-fx-text-fill: white;
}
as you can see the button has a new awesome style, but whenever i click on it, it remains as like as before and you can't understand is it clicked or not...
As I searched, I found one solution in this link: Pressed CSS, but if you notice it is The CSS that is used by Web Browsers and JavaFX does not support it.
so what is the solution? I want my button changes its appearance when the users hit or click it.
You need to add the psuedoclass state pressed to you css and add new css to it, which will differentiate your current button css with that when pressed :
.button:pressed {
// Your new css
}
For changing the style while hovering the button use :
.button:hover {
// Your new css
}
For better understanding of what style you can add for styling the button, you can go through How to make a button appear to have been clicked or selected?
for arrayLists on javaFX, try this on the CSS to change colors on mouse click:
.list-cell:selected { -fx-background-color: yellow; }