-2

このページの「カートに追加」ボタンと「チェックアウト」ボタンのスタイルを取得しようとしています: http://liff2013.com/product-passes/voodoo-package.htmlこのページとまったく同じになるように: http://liff2013.com/workshops .

クリックしない場合、ボタンは基本的に同じですが、ボタンをクリック (押したままにする) とスタイルが変わります。それを修正する理由と方法はありますか？

ありがとう！

4

5 に答える 5

1

FireBugまたはChrome 開発ツールに慣れてください。これにより、実際に適用されているスタイリングを簡単に調べることができます。

ここでの問題はspan、1 つのインスタンスでボタン自体ではなく内部要素をスタイリングしているため、:active疑似クラスが適用されると、インセット ボーダーが作動するのが見えることです。これらの両方のボタンを同じように見せたい場合の最善の策は、単一の再利用可能な CSS クラスを定義し、同じ HTML マークアップを使用して両方に適用します。

于 2013-03-26T14:34:22.730 に答える
0

.addToCartから取得したスタイルを.button、.btn-cartおよび と比較します。button

于 2013-03-26T14:31:32.043 に答える
0

CSSプロパティが定義されているため、境界線の問題が発生しています

button.button {
    border: 2px outset buttonface !important;
}

ボタンがクリックされたときにデフォルトのインセットボーダーをオーバーライドしています（:active）。

他の人々はすでにフォントの問題に取り組んでいます。

于 2013-03-26T14:37:50.617 に答える
0

次のように同じクラスを追加する必要があります。

見栄えの良いボタンコード:

<button onclick="setLocation('BLAH')" class="addToCart">
    Add To Cart
</button>

見栄えの悪いボタンコード:

<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)">
<span><span>Add to Cart</span></span>
</button>

修正：

<button type="button" title="Add to Cart" class="addToCart " onclick="BLAH">
    Add to Cart
</button>

違いを見ます？

于 2013-03-26T14:34:33.293 に答える
0

よさそうなボタン：

<button onclick="setLocation('http://liff2013.com//checkout/cart/add?product=13&amp;qty=1')" class="addToCart">Add To Cart</button>

見栄えの悪いボタン：

<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)">
    <span>
        <span>Add to Cart</span>
    </span>
</button>

共通クラスがない場合、または共通クラスがある場合にどのように見えるかを確認する必要があると思いますspan。

于 2013-03-26T14:29:50.473 に答える