css – Richfaces Skin Overriding Styleclass

前端之家收集整理的这篇文章主要介绍了css – Richfaces Skin Overriding Styleclass前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个JSF2 / Richfaces 4项目,其中我想使用一个默认皮肤,但我也想使用我自己的自定义样式表设置一些东西的风格.这听起来很简单,但是我发现,至少在某些情况下,我自己的风格没有被使用.要明确,这里是我相关的web.xml上下文参数:
<context-param>
    <param-name>org.richfaces.skin</param-name>
    <param-value>blueSky</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.control_skinning</param-name>
    <param-value>enable</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.control_skinning_classes</param-name>
    <param-value>enable</param-value>
</context-param>

我的CSS文件包含:

<h:outputStylesheet name="jsp-css.css" library="css" />

一个这样的实际风格定义:

.obsOptBtnSel{
background-color: transparent;
background-image: url('/images/circleY.gif');
background-repeat: no-repeat;
background-position: center;
border: none;
text-align: center;
width: 2em;
height: 2em;
}

而实际的按钮使用风格:

<h:commandButton
value="?"
styleClass="#{obs.observation.observationExtent == -1.0 ? 'obsOptBtnSel' : 'obsOptBtnUns'}"
id="unknownButton"
/>

所以,人们会认为我会从相关的blueSky皮肤继承样式,然后由于我指定了一个样式类,所以自定义样式表中提到的任何属性都将被覆盖.

但是,当我看到Firebug中的元素时,我看到我的styleClass被皮肤指定的styleClass覆盖,例如它不断使用blueSky背景图像而不是我的.

我知道我可以通过在样式表中的所有样式之后简单地放置!重要的,但这似乎是一个非常肮脏和不必要的方式来处理这个问题.

我在这里做错了什么?还有另一个解决方案吗?

解决方法

RichFaces已经在输入[type = submit] CSS选择器上指定了一个默认的背景,这是一个比.obsOptBtnSel更强大的选择器.基本上有两个选择:

>重命名你的选择器来输入[type = submit] .obsOptBtnSel来使它更强大.

input[type=submit].obsOptBtnSel {
    background-color: transparent;
    background-image: url('/images/circleY.gif');
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    text-align: center;
    width: 2em;
    height: 2em;
}

注意,这4个背景属性可以设置为背景oneliner与子属性在顺序彩色图像位置重复:

background: transparent url('/images/circleY.gif') center no-repeat;

>添加!对背景属性重要,以覆盖由其他CSS选择器设置的相同元素上的所有非!重要属性.

.obsOptBtnSel {
    background-color: transparent !important;
    background-image: url('/images/circleY.gif') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: none;
    text-align: center;
    width: 2em;
    height: 2em;
}

或者,更短,

background: transparent url('/images/circleY.gif') center no-repeat !important;
原文链接:https://www.f2er.com/css/214351.html

猜你在找的CSS相关文章