このページの「カートに追加」ボタンと「チェックアウト」ボタンのスタイルを取得しようとしています: http://liff2013.com/product-passes/voodoo-package.htmlこのページとまったく同じになるように: http://liff2013.com/workshops .
クリックしない場合、ボタンは基本的に同じですが、ボタンをクリック (押したままにする) とスタイルが変わります。それを修正する理由と方法はありますか?
ありがとう!
このページの「カートに追加」ボタンと「チェックアウト」ボタンのスタイルを取得しようとしています: http://liff2013.com/product-passes/voodoo-package.htmlこのページとまったく同じになるように: http://liff2013.com/workshops .
クリックしない場合、ボタンは基本的に同じですが、ボタンをクリック (押したままにする) とスタイルが変わります。それを修正する理由と方法はありますか?
ありがとう!
FireBugまたはChrome 開発ツールに慣れてください。これにより、実際に適用されているスタイリングを簡単に調べることができます。
ここでの問題はspan
、1 つのインスタンスでボタン自体ではなく内部要素をスタイリングしているため、:active
疑似クラスが適用されると、インセット ボーダーが作動するのが見えることです。これらの両方のボタンを同じように見せたい場合の最善の策は、単一の再利用可能な CSS クラスを定義し、同じ HTML マークアップを使用して両方に適用します。
.addToCart
から取得したスタイルを.button
、.btn-cart
および と比較します。button
CSSプロパティが定義されているため、境界線の問題が発生しています
button.button {
border: 2px outset buttonface !important;
}
ボタンがクリックされたときにデフォルトのインセットボーダーをオーバーライドしています(:active)。
他の人々はすでにフォントの問題に取り組んでいます。
次のように同じクラスを追加する必要があります。
見栄えの良いボタンコード:
<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>
違いを見ます?
よさそうなボタン:
<button onclick="setLocation('http://liff2013.com//checkout/cart/add?product=13&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
。