How can I change the font-size and font color of an input field?
I fiddled around with extending css (class .bl-input) and also with a block like
In general: Your claim is to be a no-code platform. A lot of UI components cannot be styled w.r.t. basic aspects like font-size, color, etc., without extending your complicated css/less coding. This is not no-code! PLEASE add these very basic configuration options to all UI components.
Regards,
Hello @Klaas_Klever
You can try this:
.bl-input * {
color: green !important;
font-size: 24px;
}
As for styling components in general, we try to provide a maximum of offered properties from MUI(parent library). But often is not real to change some options in one click(like font size for input), because component are more complicated than native HTML tag(like same ).
So if you really feel not cozy about some properties you cannot set up from designer, just create a topic where describe what on your opinion should be immediately implemented, because without this, “nocoding” becomes painfully, or what good to have, but it’s not critical.
One thing you should understand, what for you “one-click” - for our developers is hours and days of implementing and testing. So we can’t in one day release “all properties for all components” if users not ask for this.
Regards, Dima.
Agree @Dima . So my more specific request is to allow text customization (basically what you have as “Typography” for the text component) for all UI components which display text, or allow text editing.
One more thing with which you can help me please:
With your proposed method, I’m changing the style of all input fields. I want to change the style of one specific input field. So, I tried
.inputSmallFont {
.bl-input * {
font-size: 10px;
}
}
and assigned inputSmallFont as a class to the input component in UI Builder. In some other contexts this worked out, but here it has no effect.
Thanks
.inputSmallFont {
.bl-input * {
font-size: 10px;
}
}
This means you have an element with class bl-input inside an element with class inputSmallFont
You need to write
.inputSmallFont.bl-input * {
font-size: 10px;
}
or
.inputSmallFont {
&.bl-input * {
font-size: 10px;
}
}
Thats transform to .inputSmallFont.bl-input and mean one element with both classes.
Also I’ve created an internal ticket(BKNDLSS-26285) to investigate if we could add typography for input.
Hello @Klaas_Klever
We have added the ability to set the font size for an input component. You can find this property in the typography section of the input settings.
Regards,
Inna
Thanks!
Thanks for the typography font-size. Would be great if text color and border color could also be changed for input fields.
Just a follow up for those who are interested. I managed to change the color of an input field this way:
.input-white {
&.bl-input--standard {
.bl-input-label {
color: #FFFFFF88 !important;
}
.bl-input-label--focused {
color: white !important;
}
.bl-input-input-root::before {
border-bottom-color: #FFFFFF88 !important;
}
.bl-input-input-root::after {
border-bottom-color: white !important;
}
}
}
Would be great if there could be a way to change this in the side panel directly.
You could setup variables for this purpose.
For example for outlined input:
@inputOutlinedBorder: 2px solid red;
@inputOutlinedColor: green;
@inputOutlinedLabelColor: orange;
List of variables you could find at SDK Styles(shown on screenshot)
Don’t forget for hover/focus state of input, they also should be styled.
Regards, Dima.
Thanks for the feedback.
In fact, the theme is already set up for a white background and I am fine with that.
It’s just that in specific places I have inverted colors and the input fields are set against a dark background. This is why I don’t want to modify the whole theme.
However, indeed I noticed that there are some cases I missed with my simple code above. I will try to set it up fully, but if ever you have a way to suggest it as well, it would be very much appreciated.
Best regards,
Nicolas
Hi @Jose_Caputo
try to add the following styles
.bl-input {
&.bl-input--standard {
input{
color:red;
}
}
}
Regards,
Vlad