Does anyone know how to remove the default dotted border of a hyperlink in css?
Also, how do I move the hyperlink to the left so it alligns with the password label? Any help will be appreciated!
Just set the border color to transparent in a CSS stylesheet. The padding can be removed using the -fx-padding property:
.hyperlink {
-fx-border-color: transparent;
-fx-padding: 4 0 4 0;
}
or set the border to empty from java code
link.setBorder(Border.EMPTY);
link.setPadding(new Insets(4, 0, 4, 0));
Related
I'm looking to "cut" the top left corner of a tab, like if you had folded the corner of a page down.
Are there any methods?
My code:
.tab:before {
-fx-position: absolute;
-fx-top: 0;
-fx-right: 0;
-fx-border-top: 300px solid white;
-fx-border-left: 200px solid red;
-fx-width: 0;
-fx-background-color: transparent;}
return:
.jar!/css/tabs.css: expected series of while parsing '-fx-border-top' at [9,20]
Many of these properties are not supported: I don't know where you are getting them from.
There is no -fx-position, -fx-top, -fx-right property (in general, JavaFX CSS is used for style, not for layout).
There is no -fx-border-top or -fx-border-right property: border sizes are specified by -fx-border-width: top right bottom left syntax, and similarly border colors are specified by -fx-border-color. There is a -fx-border-radius property, which I think is the one you are looking for.
There is no :before pseudoclass.
So you can try something like this (which is not tested; provide a complete example in your question if you want tested code in the answers):
.tab {
-fx-border-color: white, red ;
-fx-border-width: 1 0 0 0, 0 0 0 1 ;
-fx-border-radius: 5 0 0 0 ;
}
Refer to the JavaFX CSS reference guide for an actual list of defined properties.
It's also worth noting that in the default styles, borders are almost never used directly. The preferred way of creating a border effect in modena is to use "nested backgrounds". Using this approach your CSS might look like:
.tab {
-fx-background-color: white, red, -fx-body-color ;
-fx-background-insets: 0, 1 0 0 0, 1 0 0 1 ;
-fx-background-radius: 10 0 0 0 ;
}
For more complex shapes (other than just rectangles with rounded corners), you could also use the -fx-shape property, using SVG syntax to define the shape of the tab.
It's useful to look at the source code for the default stylesheet to see how this all works. You probably want to change the styles for .tab:selected to make selection play nicely with your styles.
I decided to do it a lazy way, set the image in the background in the format I wanted and left the background transparent.
.tab {
-fx-background-image: url("../icons/pane.png");
-fx-background-size: stretch;
-fx-background-color: transparent;
-fx-padding: 0px 20px 0px 20px;
Tab
I'm using antd input like this
How to change the grey color to white color.
I tried changing on the input tag:
background-color: white !important;
but it doesn't work
This is because of autocomplete, which sets a blue background on these elements. You can use a quick hack to fix this, using an inset box-shadow:
input:-webkit-autofill {
box-shadow: 0 0 0 9999px #fff inset;
}
Would like to ask if that happened when the input is focused? Can you try this
input[type=password]:focus {
background-color: white;
}
This looks like a style when the input is selected.
Try to :focus
Your screenshot looks like password field was filled by autocomplete.
If my guess is right, please head to this link and this link.
Using JavaFX 15
There's a line of shadow below the border of the JavaFX FXML button.
is it possible to make it transparent using CSS? As I do not know which attribute it belongs to.
Picture of the button attached below
.btn{
-fx-background-color: black;
-fx-background-radius: 30px;
-fx-border-color: white;
-fx-border-radius: 30px;
-fx-border-width: 3px;
}
colored with black background and white borderline for visibility
It is possible that what you are seeing is the background spilling out past the border. Since you have customized the border thickness in the CSS, you may also need to adjust background insets.
See the CSS docs for Region https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#region
I have never seen this behaviour, but a nice reference for attributes available to the basic JavaFX-classes can be found here: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html
This could maybe be due to not overwriting all the standard JavaFX button style attributes.
I'm really stuck with finding where I can override the bootstrap control for auto-complete background color of a form-control to something other than white as it does not look good for my dark theme.
Input Control - Background color goes white after entering a input value using auto complete:
This is no good, needs to the gray colour
I was also getting a similar behavior for a select (dropdown box), after selecting an item from the list, the background was going white as you see in the image below:
I did find a solutoon for the select dropdown list which is to overrride Bootstrap with custom CSS, see below:
select.form-control:focus::-ms-value {
color: #ffffff; /* Set text to white for selected item */
background-color: transparent; /* remove background color for selected item*/
}
I am still however looking for a solution in changing the default background color for autocomplete from white to the gray color of my theme, thx
The background on autocomplete in chrome is inherited from Webkit. To address this field try to use:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
-webkit-text-fill-color: green;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
-webkit-text-fill-color: green;
}
You can change white for background color and green for your desired font color.
Testing on Chrome, this is the rule that applies on text inputs when autocompleting:
input:-internal-autofill-selected {
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
You could try changing that to your own styles and see if it works.
I'm working with a Popover, which is used as a tooltip-like help-display for a Textfield.
It contains a Label and a TextArea as content and is created, when the user enters the text field. (Via FocusPropery.addListener )
I apply the style using:
popOver.getRoot().getStylesheets().add(...)
(as found in the documentation documentation )
This works for the TextArea, but only partialy for the label.
My Style looks like this:
*{
-tb-dark-grey: rgb(32,38,44);
}
.root {
-fx-base: -tb-dark-grey;
-fx-background: -tb-dark-grey;
-fx-control-inner-background: -tb-dark-grey;
}
This works very good in my main window. Including all Labels and TextAreas. Everything gets a dark-blue background with white text.
For the Label in the Popover however it changes only the text color to white but the background stays at the usual light grey.
I tried using the TextArea as a workaround. This works for the style. But it always steals the focus from the text field. This makes it impossible to type something. Disabling the TextArea works,but that changes the style of the TextArea.
I already tried appling the style as found in this other question.
I also tried getting the focus back with, which also did not work.
popup.Show(this.inputField)
this.inputField.requestFocus(); // also tried this with Platform.runLater
Your problem should be that Label doesn't use any of the colors you have overwritten in your .root style class. According to JavaFX CSS reference guide you can style the background of a Label by using fx-background-color.
Adding the following line to your stylesheet should do the trick:
.label {
-fx-background-color: -tb-dark-grey;
}
You can also apply the style individually for each label by creating a custom style class if you want to style labels differently:
CSS:
.custom-label {
-fx-background-color: -tb-dark-grey;
}
And then applying it to a specific label:
Label label = new Label("I am a label");
label.getStyleClass().add("custom-label");
Edit: You should probably be aware that your TextArea will not display the exact color you've defined in your stylesheet. If you check the Modena stylesheet, which is the default theme and style for JavaFX (how to find it is described here). You will find the following css for the TextArea content:
.text-area .content {
/*the is 1px less top and bottom than TextInput because of scrollpane border */
-fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
-fx-cursor: text;
-fx-background-color:
linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
-fx-background-radius: 2;
}
As you can see. The background color of the TextArea content is not exactly the -fx-control-inner-background that you have defined in your stylesheet, but a linear gradient that goes from a color derived from -fx-control-inner-background to the color you want. This might not even be noticeable for you, but could be good to know.
Setting the color of the TextArea background so that is it precisely your color could be done like this:
.text-area .content {
-fx-background-color: tb-dark-grey;
}