PrimeFaces：如何覆盖CSS类

创建按钮时，总是应用类ui-corner-all。我试过以下内容：PrimeFaces：如何覆盖CSS类

<p:commandButton id="like" styleClass="ui-corner-right" />

但它没有工作。在Firebug的，我看到了两个ui-corner-all和ui-corner-right：

<div id="form1:like" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-corner-right">

更新1：

继从JMelnik提示，我终于成功加入下面的脚本的ui-corner-all的改变风格ui-corner-right：

<style type="text/css"> 
    #myForm\:likeButton .ui-corner-all { 
     border-radius: 6px 0px 0px 6px !important; 
    } 
</style>

并将<p:commandButton>包装在<h:panelGroup>的内部，如下所示：

<h:form id="myForm"> 
    <h:panelGroup id="likeButton"> 
     <p:commandButton /> 
    <h:panelGroup> 
</h:form>

更新2：

由于BalusC的建议，下面的解决方案应该会更好：

<style type="text/css"> 
    .likeButton .ui-corner-all { 
     border-radius: 6px 0px 0px 6px !important; 
    } 
</style> 

<h:panelGroup styleClass="likeButton"> 
    <p:commandButton /> 
<h:panelGroup>

最好的问候，

来源

2012-06-21 Mr.J4mes

尝试加载你的css文件到最后，例如在''中，并且确保你覆盖了由'ui-button -ui-widget -i u-state-default ui-corner-all ui -button-text-icon-left'INMO在你的情况下，你最好不要尝试从js中操纵css – Daniel

'\：'在MSIE中不起作用。在您看来，这样的按钮几乎不可能是完全独一无二的。而是使用类名。 – BalusC

相关：http://stackoverflow.com/questions/8768317/how-do-i-re-write-those-class-defined-in-primefaces-css和http://stackoverflow.com/questions/5878692/how -jsf-generated-html-element-id-in-css-selectors – BalusC

使用标准的CSS覆盖方式。

在页面中包含* .css，您可以在其中重新定义ui-corner-all和ui-corner-right类。

.ui-corner-all { 
    //ovverides to nothing, you can also define any properties you want here 
} 

.ui-corner-right { 
    //define properties which would override unwanted behaviour 
}

您还可以应用额外的CSS类，它将覆盖不需要的属性。

来源

2012-06-21 08:57:34 JMelnik

嗯......你的意思是我必须重写'ui-corner-all'和'ui-corner-right'的属性'？有没有什么方法从生成的HTML中删除'ui-corner-all'？ –

您可以使用javascript/jquery在具有它的项目上使用“removeClass（'ui-corner-all'）”。这有点麻烦，但取决于启用了JavaScript的用户。你也可以使用firebug来抓取“ui-corner-all”适用的CSS样式，然后用你自己的CSS覆盖它们。只是重复JMelnik在这里所说的。 – ConorLuddy

@CLuddy谢谢，我现在就试试:) –

PrimeFaces：如何覆盖CSS类

回答

相关问题