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 中不显示小箭头，我的源代码中也没有看到它们。不知道如何隐藏它们。有人遇到过这个吗？

数量箭头

在 Wordpress 3.5.1 中使用 Woocommerce 2.0.4

4

4 回答 4

2

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

当网站已经手动添加此功能时，这会导致困难。就个人而言，我认为 woocommerce 添加的加号和减号按钮相当烦人。您会注意到许多电子商务网站不提供加号和减号按钮。例如，eBay 会让您输入您想要的金额，而亚马逊则提供下拉菜单。

在我看来，Woocommerce 做了太多假设。无论哪种情况，除了意见，您有两种选择：

  1. 使用他的链接中提供的@Drawrdesign 等解决方案（我可以隐藏 HTML5 数字输入的旋转框吗？）。这将意味着覆盖人们可能期望从浏览器获得的用户界面行为。

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

    • 删除加号和减号按钮（不容易，因为 woocommerce 通过 javascript 添加它们并且覆盖模板文件不会删除它们；快速破解是将类添加buttons_added到您div.quantity粘贴的），因此需要您的用户在 IE/ 中手动输入金额火狐，或
    • 用一个下拉的数量完全替换输入，比如亚马逊。
于 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;
}

（根据这篇文章“显示：无”上的数量输入可能会使 Chrome 崩溃）

于 2015-01-29T22:20:38.617 回答
0

火狐

在 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 回答