0

製品ページの数量セレクターにこれがあります。

<div class="quantity"><input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" size="4" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" maxlength="12" /></div>

このバグを発見したばかりですが、Chrome（またはChromeの機能？）でのみ発生しているようです。ボックスの外側にプラス/マイナスボタンに加えて現在の数量を表示する小さな矢印がボックス内にあります。小さな矢印はIE/Firefoxには表示されず、ソースにも表示されません。それらを隠す方法がわからない。誰かが前にこれに遭遇しましたか？

数量矢印

Wordpress3.5.1でのWoocommerce2.0.4の使用

4

4 に答える 4

2

Webkitブラウザー（chromeおよびsafari）は、ユーザーインターフェイスエクスペリエンスの一部としてこれらのボタンを自動的に作成します。近い将来、他のブラウザ（IE / Firefox）がそれに続くとしても、私は驚かないでしょう。

これは、Webサイトがすでにこの機能を手動で追加している場合に問題を引き起こします。個人的には、woocommerceによって追加されたプラスボタンとマイナスボタンはかなり面倒だと思います。多くのeコマースサイトがプラスとマイナスのボタンを提供していないことに気付くでしょう。たとえば、eBayでは必要な金額を入力できますが、amazonではドロップダウンが提供されます。

私の意見では、Woocommerceはあまりにも多くの仮定をしています。どちらの場合でも、意見はさておき、2つの選択肢があります。

  1. 彼のリンクで提供されている@Drawrdesignなどのソリューションを使用してください（HTML5番号入力のスピンボックスを非表示にできますか？）。これは、ユーザーがブラウザに期待する可能性のあるユーザーインターフェイスの動作を上書きすることを意味します。

  2. woocommerceを変更して、ブラウザの違いにうまく対応できるようにします。

    • プラスボタンとマイナスボタンを削除します（woocommerceはjavascriptを介してそれらを追加し、テンプレートファイルをオーバーライドしても削除されないため、簡単ではありません。貼り付けたものにクラスを追加するのが簡単buttons_addedですdiv.quantity）。したがって、ユーザーはIE/に手動で金額を入力する必要があります。 Firefox、または
    • 入力をすべて、amazonのように数量のドロップダウンに置き換えます。
于 2013-11-22T01:26:57.337 に答える
1

バーチバークの答えに追加するには、

CSSを使用してJavaScriptで生成されたボタンを非表示にすることもできます。ボックスの境界線と境界線の半径も修正する必要があります。これをテーマのスタイルシートに追加してみてください...

/* hide the plus and minus buttons */

.woocommerce .quantity .plus,
.woocommerce #content .quantity .plus,
.woocommerce-page .quantity .plus,
.woocommerce-page #content .quantity .plus,
.woocommerce .quantity .minus,
.woocommerce #content .quantity .minus,
.woocommerce-page .quantity .minus,
.woocommerce-page #content .quantity .minus
{
    display: none;
}

/* removed the fixed width on its container */

.woocommerce div.product form.cart div.quantity,
.woocommerce #content div.product form.cart div.quantity,
.woocommerce-page div.product form.cart div.quantity,
.woocommerce-page #content div.product form.cart div.quantity
{
    width: auto;
}

/* make the quantity input look pretty */

.woocommerce .quantity input.qty,
.woocommerce #content .quantity input.qty,
.woocommerce-page .quantity input.qty,
.woocommerce-page #content .quantity input.qty
{
    text-align: left;
    padding: 0 5px;
    width: 50px;
    border: 1px solid #c7c0c7;
    border-radius: 2px;
}
于 2014-03-18T14:46:59.483 に答える
0

以下は私にとって完璧に機能しました：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

（この投稿によると、数量入力の「display：none」はChromeをクラッシュさせる可能性があります）

于 2015-01-29T22:20:38.617 に答える
0

Firefox

Firefoxでネイティブのプラス/マイナスを非表示にするには、次のCSSを使用します。

input[type=number] {
    -moz-appearance: textfield;
}

!importantそれでもうまくいかない場合は、ルールを追加してみてください

input[type=number] {
    -moz-appearance: textfield !important;
}

クロム

場合によっては、Chromeはネイティブのプラス/マイナスも表示しています。このCSSを使用して非表示にします。

::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

::-webkit-outer-spin-button { 
    -webkit-appearance: none;
}
于 2016-03-29T22:17:48.877 に答える