I would like to style radio button in a group but I don't know how to select the input or label part.
I use a "classic" RadioButtonGroup<String>() vaadin object. I just set a classname "myclassname" to it.
Now in my CSS stylesheet I have :
/* select the radiogroup */
.myclassname {
background-color: red;
}
/* select each button in the myclassname radiogroup */
.myclassname vaadin-radio-button {
background-color: blue;
}
/* select the label ???? */
.myclassname vaadin-radio-button [part='label'] {
background-color: pink;
}
The last part for selecting the label in the radio button doesn't work. It doesn't work for the input part as well.
How to do for selecting input or label to customize them ?
Thank you
The circle part is inside the shadow DOM of the component, so you need to use the ::part() selector. The label is in the light DOM, so you can use a regular descendant selector for that.
.myclassname vaadin-radio-button::part(radio) {
background-color: blue;
}
.myclassname vaadin-radio-button label {
background-color: pink;
}
Related
is teher any chance to style my button inside tab in the css for vaadin-tabs component or i must do it by setclassname individually for button?
Accordin to this tutorial https://vaadin.com/docs/v14/flow/styling/styling-components
i tried:
vaadin-tabs vaadin-button{
background-color:red;
}
vaadin-tab > vaadin-button{
background-color:red;
}
[part="close-tab-btn"]{
background-color:red;
}
But none of it work. I`m importing my css by annotation:
#CssImport(value="./styles/components/tabs.css", themeFor = "vaadin-tabs")
and rest of my css looks like this:
[part="tabs"] ::slotted(vaadin-tab[selected]) {
color: var(--default-white-color);
background-color: var(--default-black-color);
}
[part="tabs"] ::slotted(vaadin-tab) {
color: var(--default-black-color);
background-color: var(--default-white-color-2);
border-radius: var(--default-border-radius) var(--default-border-radius) 0px 0px;
MARGIN-RIGHT: 3px;
}
[part="tabs"] ::slotted(vaadin-tab[selected])::before{
background-color: var(--default-app-color);
width:100%
}
*edit
But if my component is inside of dom in my slotted component then i can somehow style it from my top layout. In this example i mean if i can style input-field of text-area inside vaadin-vertical-layout
From the looks of your screenshot, the vaadin-button is not inside any shadow root. In that case, you can style it from the global styles.
For example styles.css
vaadin-button.close-tab-btn {
background-color: red;
}
and importing it with something like
#CssImport("./styles/styles.css").
I can get a p+p adjacent selector working, but not label + input. Why could this be?
p+p {
color: red;
/* Works fine! */
}
label+input {
background-color: red;
/* Doesn't work */
}
<p>Test</p>
<p>Test</p>
<br>
<label>Test</label><input type='checkbox'>
https://jsfiddle.net/h16engzw/
No, Actually it's working but you are not using the right property
label+input {
background-color: red;
/* Doesn't work */
}
in this code you are trying to give background-color: red; to a checkbox but you can't give background-color to a checkbox.
for example if you will try this:
input {
background-color: red;
}
this will won't work too.
you are using right selector but the wrong property for a checkbox for example try this.
label+input {
height:70px;
}
now the height of checkbox will change.
I hope you got my point.
Please feel free to ask if not.
I am trying to do some css styling in a stylesheet for a JavaFX scene.
It is going to be loaded upon opening the scene, and targets all the "basic" elements of a scene.
My problem is that i can't seem to find the right combination of code, to change the background color, of the button in a standard JavaFX checkbox.
This is where i am now:
.check-box:selected{
-fx-background-color: #00FF00;
}
I have tried some variants of the above, like
.check-box .button{
-fx-fill: #00FF00;
-fx-background-color: #00FF00;
}
and others, but without success.
So in general, how do i access a button in a checkbox?
Thank you in advance :-)
The parts of the CheckBox to apply the -fx-background-color to are .box and .box > .mark in case you want to change the mark color:
.check-box:selected > .box {
/* background color for selected checkbox */
-fx-background-color: lime;
}
.check-box > .box {
/* background color of unselected checkbox */
-fx-background-color: red;
}
.check-box:selected > .box > .mark,
.check-box:indeterminate > .box > .mark {
/* modify mark color */
-fx-background-color: blue;
}
How to change color of the selected item from a Xul listbox?
I've tried something like:
listitem:focus {
background-color: red;
color: red;
}
but nothing happens.. and I'm not finding anything in css or xul doc.. (but I'm still looking).
Any idea?
This works:
listitem[selected] { // or listitem[selected=true]
background-color: red;
color: red;
}
listitem[selected] applies to all listitems that have an attribute selected (or an attribute selected that evaluates to true... not quite sure).
I have a div called "divContainer" inside which i have few input elements like textboxes,radio buttons et..
How can i define the style for then in the CSS ? I wanna mention styles for elements inside this purticular div.not for the entire form.
Ex: For textboxes i need width as 150px;
For Radio buttons i need width of 20px;
You can define style rules which only apply to specific elements inside your div with id divContainer like this:
#divContainer input { ... }
#divContainer input[type="radio"] { ... }
#divContainer input[type="text"] { ... }
/* etc */
CSS 3
divContainer input[type="text"] {
width:150px;
}
CSS2
add a class "text" to the text inputs then in your css
.divContainer.text{
width:150px;
}
Like this.
.divContainer input[type="text"] {
width:150px;
}
.divContainer input[type="radio"] {
width:20px;
}
When you say "called" I'm going to assume you mean an ID tag.
To make it cross-brower, I wouldn't suggest using the CSS3 [], although it is an option. This being said, give each of your textboxes a class like "tb" and the radio button "rb".
Then:
#divContainer .tb { width: 150px }
#divContainer .rb { width: 20px }
This assumes you are using the same classes elsewhere, if not, this will suffice:
.tb { width: 150px }
.rb { width: 20px }
As #David mentioned, to access anything within the division itself:
#divContainer [element] { ... }
Where [element] is whatever HTML element you need.