How to change font-size/color of Input-filed

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


without success.
How can I achive this?

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_Vak . 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.