css - 使用 Dojo 元素的 Xpage

Question

我对将 CSS 应用于我的 Xpage 中的某些 dojo 元素感到困惑。

我有一个 CSS 样式表，其中包含以下内容:

.formFields {
color: rgb(5, 56, 107);
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 18px;
text-align: left;
width: 400px;
}

我有一个包含以下代码的示例测试页:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:this.resources>
        <xp:styleSheet href="/custom.css" />
    </xp:this.resources>
    <xe:firebugLite id="firebugLite1" />
    <xe:djTextBox id="LocNum" styleClass="formFields" value="#{document1.locNum}" />
    <xp:br />
    <xp:br />
    <xp:inputText id="inputText1" styleClass="formFields" />
</xp:view>

当我运行它并查看 Firebug 时，我注意到我的 CSS 没有被应用。对于 dojo 元素，这似乎适用:

.dijitReset {
  -moz-font-feature-settings:inherit;
  -moz-font-language-override:inherit;
  border:0 none;
  color:inherit;
  font-family:inherit;
  font-size:**24px;**
  font-size-adjust:inherit;
  font-stretch:inherit;
  font-style:inherit;
  font-variant:inherit;
  font-weight:inherit;
  line-height:normal;
  margin:0;
  padding:0;
}

我通过更改字体大小确认了这一点。

我希望我所有的输入字段看起来都一样。有些字段是蓝色的，有些是黑色的。我还想让它们在编辑模式下看起来一样，在阅读模式下也一样。这样用户就可以知道他们处于什么模式。

这到底是怎么回事？我有时发现 CSS 太难了。

布莱恩

Answer 1

我相信您的问题与其说是直接的 CSS 问题，不如说是 XPages 如何构建 dijit 元素(xe:djTextBox)以及它在哪里应用您定义的 CSS 样式的组合问题重新尝试仅从外部文件使用 CSS。发生的事情是它正在应用您的 formFields 类，但它应用到它生成的根元素，一个 div。用户实际键入的输入嵌套在另一个 div 内的两个元素中。

为了解决这个问题，我建议将您的 CSS 调整为在 XPage 中定义，在 <style type="text/css> 标记中，根据 CSS 从“自下而上”继承的性质，优先于通过 XPages 和 Dojo 提供的样式。

CSS 的继承:

• 内联样式优先 (style="...")
• 页面样式(在标签中定义，就像我描述的那样)
• 外部样式表(使用 定义)

您可能能够将其应用到外部定义的样式中，您可能希望尝试将 .formFields 的定义更改为 .formFields，.formFields 输入并将一些 !important 标志扔到您的属性线的末端。这将使其适用于具有 formFields 类的元素下方的输入。

这是一个页内定义样式的示例: