SAPUI5 - Input Field - Fontsize - CSS: Changing fontsize does not work

Question

I have a field of type sap.m.Input. I placed it in my view as we all know it. I added my custom .css code which looks like this:

.inputFocused{

  background-color: #ABEBC6 !important;
  font-size: 3.5rem !important; 
}

.inputNotFocused{

    background-color: #F4F4F4 !important;
    font-size: 35px !important;
 }

No matter, whether I pass one of those styles as tag-attribute via

<Input class="inputNotFocused" id="privateId" type="Number" editable="false" maxLength="13" placeholder="{i18n>privateId}" width="150px"/>

or if I do it at runtime at any given moment, like

this.rInputWithFocus.addStyleClass("inputFocused");

I do see the change in the background-color.

BUT never ever the font changed.

The same approach works, e.g, for simple labels, without any issues.

But apparently not for sap.m.Input.

What am I missing ?

Answer 1

The UI5 control Input will be rendered as a div which contains the actual input.

The resulting HTML will look like the following

<div id="__xmlview1--inputText-content" class="sapMInputBaseContentWrapper" style="width: 100%;">
    <input id="__xmlview1--inputText-inner" placeholder="Enter text" value="" aria-labelledby="__label5" type="text" autocomplete="off" class="sapMInputBaseInner">
</div>

Your custom class inputNotFocused will be applied to the div.

The inner input has its own CSS class which defines a different font-size (but not a different background-color, that's why the background-color can be changed by changing the div and the input will inherit the background-color from the div).

If you want to change the inner input, adapt your CSS:

.inputNotFocused input {
   font-size: 3.5rem;
}

or use .inputNotFocused .sapMInputBaseInner as the selector.

No need for ugly !important btw.

But keep in mind, adding your own CSS to SAP standard CSS may break in the future.