5

ボタンが作成されると、クラスui-corner-allは常に適用されます。私は次のことを試しました：

<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-alltoのスタイルを変更することに成功しました。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>

よろしくお願いします、

4

1 に答える 1

5

標準の CSS オーバーライド方法を使用します。

クラスui-corner-allを再定義するページに *.css を含めます。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-21T08:57:34.040 に答える