Wordpress Chrome中的冗余输入按钮

我在产品页面上的数量选择器中有以下内容：

<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>

Webkit浏览器（chrome和safari）会自动创建这些按钮，作为用户界面体验的一部分。如果其他浏览器（IE/Firefox）在不久的将来效仿，我不会感到惊讶

当网站已经手动添加此功能时，这会造成困难。就我个人而言，我认为woocommerce添加的加号和减号按钮相当烦人。你会注意到许多电子商务网站都没有提供加号和减号按钮。例如，易趣让你输入你想要的金额，而亚马逊则提供下拉列表

在我看来，Woocommerce做了太多的假设。无论哪种情况，抛开观点不谈，你都有两种选择：

使用他的链接（）中提供的@Drawrdesign等解决方案。这意味着覆盖用户可能期望从其浏览器中获得的用户界面行为

更改woocommerce以更好地适应浏览器差异，或者：


删除加号和减号按钮（这并不容易，因为woocommerce通过javascript添加了加号和减号按钮，覆盖模板文件不会删除加号和减号按钮；快速破解方法是将添加的类
按钮添加到粘贴的
div.quantity
），从而要求用户在IE/Firefox中手动输入金额，或者

将输入完全替换为数量下拉列表，如amazon

Webkit浏览器（chrome和safari）会自动创建这些按钮，作为用户界面体验的一部分。如果其他浏览器（IE/Firefox）在不久的将来效仿，我不会感到惊讶

当网站已经手动添加此功能时，这会造成困难。就我个人而言，我认为woocommerce添加的加号和减号按钮相当烦人。你会注意到许多电子商务网站都没有提供加号和减号按钮。例如，易趣让你输入你想要的金额，而亚马逊则提供下拉列表

在我看来，Woocommerce做了太多的假设。无论哪种情况，抛开观点不谈，你都有两种选择：

使用他的链接（）中提供的@Drawrdesign等解决方案。这意味着覆盖用户可能期望从其浏览器中获得的用户界面行为

更改woocommerce以更好地适应浏览器差异，或者：


删除加号和减号按钮（这并不容易，因为woocommerce通过javascript添加了加号和减号按钮，覆盖模板文件不会删除加号和减号按钮；快速破解方法是将添加的类
按钮添加到粘贴的
div.quantity
），从而要求用户在IE/Firefox中手动输入金额，或者

将输入完全替换为数量下拉列表，如amazon

再加上桦树皮的回答

您还可以使用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;
}

再加上桦树皮的回答

您还可以使用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;
}

以下几点对我来说非常有效：

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

（根据quantity input上的“display:none”（显示：无）可以使Chrome崩溃）
以下内容对我来说非常有效：

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

（根据数量输入上的“显示：无”可以使Chrome崩溃）
Firefox

在Firefox中隐藏本机加号/减号使用以下CSS：

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

如果不起作用，请尝试添加
！重要
规则

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

Chrome

在某些情况下，Chrome也会显示本机的加号/减号。使用此CSS将其隐藏：

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

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

Firefox

在Firefox中隐藏本机加号/减号使用以下CSS：

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

如果不起作用，请尝试添加
！重要
规则

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

Chrome

在某些情况下，Chrome也会显示本机的加号/减号。使用此CSS将其隐藏：

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

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

看看这个问题：chrome是唯一一个支持带步骤输入数字的浏览器。这将是一个功能，而不是一个bug。看看这个问题：chrome是唯一一个支持带步骤输入数字的浏览器。这将是一个功能，而不是一个bug。