SAPUI5

Question

我有一个 sap.m.Input 类型的字段。众所周知，我把它放在我的视野中。我添加了我的自定义 .css 代码，如下所示：

.inputFocused{

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

.inputNotFocused{

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

没关系，我是否通过

将其中一种样式作为标记属性传递

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

或者如果我在任何给定时刻在运行时执行此操作，例如

this.rInputWithFocus.addStyleClass("inputFocused");

我确实看到了背景颜色的变化。

但字体从未改变过。

同样的方法适用于简单的标签，没有任何问题。

但显然不适合 sap.m.Input。

我错过了什么？

Answer 1

UI5 控件 Input 将呈现为包含实际输入的 div。

结果 HTML 如下所示

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

您的自定义 class inputNotFocused 将应用于 div。

内部输入有自己的 CSS class 定义不同的字体大小（但不是不同的背景颜色，这就是为什么可以通过更改 div 并且输入将从 div).

继承背景颜色

如果你想改变内部输入，调整你的CSS:

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

或使用 .inputNotFocused .sapMInputBaseInner 作为选择器。

不需要丑陋的 !important 顺便说一句。

但请记住，将您自己的 CSS 添加到 SAP 标准 CSS 将来可能会中断。

SAPUI5 - 输入字段 - 字体大小 - CSS：更改字体大小不起作用

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

css

font-size

input-field