Question

我正在为一个项目修改一个名为“Shopkeeper”的Woocommerce Wordpress主题。查看产品时，会显示默认数量1，您可以将其添加到购物车。如果将鼠标悬停在1上，则会显示数字输入的向上/向下箭头。像这样：

我的客户希望所有时间都显示向上/向下箭头。我检查了页面并强制悬停状态以查看CSS导致输入在悬停时显示的内容，但我似乎无法弄清楚触发了什么属性，因此我可以将其修改为始终显示。

这是html：

<input type="number" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">

这是强制悬停状态时的CSS：

input[type="text"]:focus, input[type="password"]:focus, 

input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus, select:focus, #coupon_code:focus, .chosen-container-single .chosen-single:focus, .woocommerce .product_infos .quantity input.qty, .woocommerce #content .product_infos .quantity input.qty, .woocommerce-page .product_infos .quantity input.qty, .woocommerce-page #content .product_infos .quantity input.qty, .post_tags a, .wpb_widgetised_column .tagcloud a, .coupon_code_wrapper, .woocommerce form.checkout_coupon, .woocommerce-page form.checkout_coupon, .woocommerce ul.digital-downloads:before, .woocommerce-page ul.digital-downloads:before, .woocommerce ul.digital-downloads li:after, .woocommerce-page ul.digital-downloads li:after, .widget_search .search-form, .woocommerce .widget_layered_nav ul li a:before, .woocommerce-page .widget_layered_nav ul li a:before, .widget_layered_nav ul li a:before, .woocommerce .widget_product_categories ul li a:before, .woocommerce-page .widget_product_categories ul li a:before, .widget_product_categories ul li a:before, .woocommerce-cart.woocommerce-page #content .quantity input.qty {
    border-color: rgba(84,84,84,0.15);
}
.woocommerce .quantity .qty:hover {
    -moz-appearance: number-input;
}
.product_infos .quantity input.qty, .woocommerce .product_infos .quantity .qty {
    font-weight: 700;
}
.quantity input.qty, .woocommerce .quantity .qty {
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    width: 60px !important;
    height: 50px !important;
    line-height: 50px !important;
    float: left;
    padding: 0px 0px 0px 13px;
    text-align: center;
    vertical-align: middle;
    border: none;
    outline: none;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    background: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -moz-appearance: textfield;
    transition: none;
    -webkit-transition: none;
}
.woocommerce .quantity .qty {
    width: 3.631em;
    text-align: center;
}
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select, .chosen-container-single .chosen-single, .country_select.select2-container, .woocommerce form .form-row.woocommerce-validated .select2-container, .woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-validated select, .woocommerce form .form-row.woocommerce-invalid .select2-container, .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select, .country_select.select2-container, .state_select.select2-container, #coupon_code {
    border-color: rgba(84,84,84,0.1);
}
h1, h2, h3, h4, h5, h6, .comments-title, .comment-author, #reply-title, #site-footer .widget-title, .accordion_title, .ui-tabs-anchor, .products .button, .site-title a, .post_meta_archive a, .post_meta a, .post_tags a, #nav-below a, .list_categories a, .list_shop_categories a, .main-navigation > ul > li > a, .main-navigation .mega-menu > ul > li > a, .more-link, .top-page-excerpt, .select2-search input, .product_after_shop_loop_buttons a, .woocommerce .products-grid a.button, .page-numbers, input.qty, .button, button, .button_text, input[type="button"], input[type="reset"], input[type="submit"], .woocommerce a.button, .woocommerce-page a.button, .woocommerce button.button, .woocommerce-page button.button, .woocommerce input.button, .woocommerce-page input.button, .woocommerce #respond input#submit, .woocommerce-page #respond input#submit, .woocommerce #content input.button, .woocommerce-page #content input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page #content input.button.alt, .yith-wcwl-wishlistexistsbrowse.show a, .share-product-text, .tabs > li > a, label, .comment-respond label, .product_meta_title, .woocommerce table.shop_table th, .woocommerce-page table.shop_table th, #map_button, .coupon_code_text, .woocommerce .cart-collaterals .cart_totals tr.order-total td strong, .woocommerce-page .cart-collaterals .cart_totals tr.order-total td strong, .cart-wishlist-empty, .return-to-shop .wc-backward, .order-number a, .account_view_link, .post-edit-link, .from_the_blog_title, .icon_box_read_more, .vc_pie_chart_value, .shortcode_banner_simple_bullet, .shortcode_banner_simple_height_bullet, .category_name, .woocommerce span.onsale, .woocommerce-page span.onsale, .out_of_stock_badge_single, .out_of_stock_badge_loop, .page-numbers, .page-links, .add_to_wishlist, .yith-wcwl-wishlistaddedbrowse, .yith-wcwl-wishlistexistsbrowse, .filters-group, .product-name, .woocommerce-page .my_account_container table.shop_table.order_details_footer tr:last-child td:last-child .amount, .customer_details dt, .widget h3, .widget ul a, .widget a, .widget .total .amount, .wishlist-in-stock, .wishlist-out-of-stock, .comment-reply-link, .comment-edit-link, .widget_calendar table thead tr th, .page-type, .mobile-navigation a, table thead tr th, .portfolio_single_list_cat, .portfolio-categories, .shipping-calculator-button, .vc_btn, .vc_btn2, .vc_btn3, .offcanvas-menu-button .menu-button-text, .account-tab-item .account-tab-link, .account-tab-list .sep, ul.order_details li span, ul.order_details.bacs_details li, .widget_calendar caption, .widget_recent_comments li a, .edit-account legend, .widget_shopping_cart li.empty, .cart-collaterals .cart_totals .shop_table .order-total .woocommerce-Price-amount, .woocommerce table.cart .cart_item td a, .woocommerce #content table.cart .cart_item td a, .woocommerce-page table.cart .cart_item td a, .woocommerce-page #content table.cart .cart_item td a, .woocommerce table.cart .cart_item td span, .woocommerce #content table.cart .cart_item td span, .woocommerce-page table.cart .cart_item td span, .woocommerce-page #content table.cart .cart_item td span, .woocommerce-MyAccount-navigation ul li {
    font-family: 'Poppins',sans-serif;
}
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {
    font-size: 0.875rem;
    color: #444;
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
    height: 2.5rem;
    outline: none;
    font-weight: 900;
    margin: 0;
}
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-color: #fff;
    font-family: inherit;
    border: 1px solid #ddd;
    box-shadow: inset 0 0 0 transparent;
    color: rgba(0,0,0,0.75);
    display: block;
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
    padding: 0.5rem;
    height: 2.3125rem;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.15s linear;
}
body, p, #site-navigation-top-bar, .site-title, .widget_product_search #searchsubmit, .widget_search #searchsubmit, .widget_product_search .search-submit, .widget_search .search-submit, #site-menu, .copyright_text, blockquote cite, table thead th, .recently_viewed_in_single h2, .woocommerce .cart-collaterals .cart_totals table th, .woocommerce-page .cart-collaterals .cart_totals table th, .woocommerce .cart-collaterals .shipping_calculator h2, .woocommerce-page .cart-collaterals .shipping_calculator h2, .woocommerce table.woocommerce-checkout-review-order-table tfoot th, .woocommerce-page table.woocommerce-checkout-review-order-table tfoot th, .qty, .shortcode_banner_simple_inside h4, .shortcode_banner_simple_height h4, .fr-caption, .post_meta_archive, .post_meta, .page-links-title, .yith-wcwl-wishlistaddedbrowse .feedback, .yith-wcwl-wishlistexistsbrowse .feedback, .product-name span, .widget_calendar table tbody a, .fr-touch-caption-wrapper, .woocommerce .login-register-container p.form-row.remember-me-row label, .woocommerce .checkout_login p.form-row label[for="rememberme"], .woocommerce .checkout_login p.lost_password, .form-row.remember-me-row a, .wpb_widgetised_column aside ul li span.count, .woocommerce td.product-name dl.variation dt, .woocommerce td.product-name dl.variation dd, .woocommerce td.product-name dl.variation dt p, .woocommerce td.product-name dl.variation dd p, .woocommerce-page td.product-name dl.variation dt, .woocommerce-page td.product-name dl.variation dd p, .woocommerce-page td.product-name dl.variation dt p, .woocommerce-page td.product-name dl.variation dd p, .woocommerce span.amount, .woocommerce ul#shipping_method label, .woocommerce .select2-container, .check_label, .woocommerce-page #payment .terms label, ul.order_details li strong, .woocommerce-order-received .woocommerce table.shop_table tfoot th, .woocommerce-order-received .woocommerce-page table.shop_table tfoot th, .woocommerce-view-order .woocommerce table.shop_table tfoot th, .woocommerce-view-order .woocommerce-page table.shop_table tfoot th, .widget_recent_comments li, .widget_shopping_cart p.total, .widget_shopping_cart p.total .amount, .mobile-navigation li ul li a, .woocommerce table.cart .cart_item td:before, .woocommerce #content table.cart .cart_item td:before, .woocommerce-page table.cart .cart_item td:before, .woocommerce-page #content table.cart .cart_item td:before {
    font-family: 'Yantramanav',sans-serif;
}
.qty {
    display: none;
    float: left;
    text-transform: uppercase;
    font-size: .8em;
}
input {
    background: none;
}
input {
    line-height: normal;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
* {
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
}
*, *:before, *:after {
    box-sizing: border-box;
}
user agent stylesheet
input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
    padding: 1px 0px;
}
user agent stylesheet
input {
    -webkit-appearance: textfield;
    background-color: white;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
}
user agent stylesheet
input, textarea, keygen, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em 0em 0em 0em;
    font: 13.3333px Arial;
}
user agent stylesheet
input, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}
Inherited from div.quantity
.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 {
    float: left;
    font-weight: 700;
    margin: 0 20px 20px 0;
    width: auto;
}
Inherited from body.single.single-product.postid-165.logged-in.admin-bar.woocommerce.woocommerce-page.wpb-js-composer.js-comp-ver-4.12.vc_responsive.customize-support
body, table tr th, table tr td, table thead tr th, blockquote p, label, .woocommerce .woocommerce-breadcrumb a, .woocommerce-page .woocommerce-breadcrumb a, .select2-dropdown-open.select2-drop-above .select2-choice, .select2-dropdown-open.select2-drop-above .select2-choices, .select2-container .select2-choice, .select2-container, .big-select, .select.big-select, .list-centered li a, .post_meta_archive a, .post_meta a, .nav-next a, .nav-previous a, .blog-single h6, .page-description, .woocommerce #content nav.woocommerce-pagination ul li a:focus, .woocommerce #content nav.woocommerce-pagination ul li a:hover, .woocommerce #content nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce-page #content nav.woocommerce-pagination ul li a:focus, .woocommerce-page #content nav.woocommerce-pagination ul li a:hover, .woocommerce-page #content nav.woocommerce-pagination ul li span.current, .woocommerce-page nav.woocommerce-pagination ul li a:focus, .woocommerce-page nav.woocommerce-pagination ul li a:hover, .woocommerce-page nav.woocommerce-pagination ul li span.current, .woocommerce table.shop_table th, .woocommerce-page table.shop_table th, .woocommerce .cart-collaterals .cart_totals h2, .woocommerce .cart-collaterals .cross-sells h2, .woocommerce-page .cart-collaterals .cart_totals h2, .woocommerce .cart-collaterals .cart_totals table tr.order-total td:last-child, .woocommerce-page .cart-collaterals .cart_totals table tr.order-total td:last-child, .woocommerce-checkout .woocommerce-info, .woocommerce-checkout h3, .woocommerce-checkout h2, .woocommerce-account h2, .woocommerce-account h3, .customer_details dt, .wpb_widgetised_column .widget a, .wpb_widgetised_column .widget.widget_product_categories a:hover, .wpb_widgetised_column .widget.widget_layered_nav a:hover, .wpb_widgetised_column .widget.widget_layered_nav li, .portfolio_single_list_cat a, .gallery-caption-trigger, .woocommerce .widget_layered_nav ul li.chosen a, .woocommerce-page .widget_layered_nav ul li.chosen a, .widget_layered_nav ul li.chosen a, .woocommerce .widget_product_categories ul li.current-cat > a, .woocommerce-page .widget_product_categories ul li.current-cat > a, .widget_product_categories ul li.current-cat > a, .wpb_widgetised_column .widget.widget_layered_nav_filters a, .woocommerce-cart .cart-collaterals .cart_totals table .order-total td .amount, .widget_shopping_cart p.total, .widget_shopping_cart p.total .amount, .wpb_widgetised_column .widget_shopping_cart li.empty {
    color: #545454;
}
body, p, #site-navigation-top-bar, .site-title, .widget_product_search #searchsubmit, .widget_search #searchsubmit, .widget_product_search .search-submit, .widget_search .search-submit, #site-menu, .copyright_text, blockquote cite, table thead th, .recently_viewed_in_single h2, .woocommerce .cart-collaterals .cart_totals table th, .woocommerce-page .cart-collaterals .cart_totals table th, .woocommerce .cart-collaterals .shipping_calculator h2, .woocommerce-page .cart-collaterals .shipping_calculator h2, .woocommerce table.woocommerce-checkout-review-order-table tfoot th, .woocommerce-page table.woocommerce-checkout-review-order-table tfoot th, .qty, .shortcode_banner_simple_inside h4, .shortcode_banner_simple_height h4, .fr-caption, .post_meta_archive, .post_meta, .page-links-title, .yith-wcwl-wishlistaddedbrowse .feedback, .yith-wcwl-wishlistexistsbrowse .feedback, .product-name span, .widget_calendar table tbody a, .fr-touch-caption-wrapper, .woocommerce .login-register-container p.form-row.remember-me-row label, .woocommerce .checkout_login p.form-row label[for="rememberme"], .woocommerce .checkout_login p.lost_password, .form-row.remember-me-row a, .wpb_widgetised_column aside ul li span.count, .woocommerce td.product-name dl.variation dt, .woocommerce td.product-name dl.variation dd, .woocommerce td.product-name dl.variation dt p, .woocommerce td.product-name dl.variation dd p, .woocommerce-page td.product-name dl.variation dt, .woocommerce-page td.product-name dl.variation dd p, .woocommerce-page td.product-name dl.variation dt p, .woocommerce-page td.product-name dl.variation dd p, .woocommerce span.amount, .woocommerce ul#shipping_method label, .woocommerce .select2-container, .check_label, .woocommerce-page #payment .terms label, ul.order_details li strong, .woocommerce-order-received .woocommerce table.shop_table tfoot th, .woocommerce-order-received .woocommerce-page table.shop_table tfoot th, .woocommerce-view-order .woocommerce table.shop_table tfoot th, .woocommerce-view-order .woocommerce-page table.shop_table tfoot th, .widget_recent_comments li, .widget_shopping_cart p.total, .widget_shopping_cart p.total .amount, .mobile-navigation li ul li a, .woocommerce table.cart .cart_item td:before, .woocommerce #content table.cart .cart_item td:before, .woocommerce-page table.cart .cart_item td:before, .woocommerce-page #content table.cart .cart_item td:before {
    font-family: 'Yantramanav',sans-serif;
}
body {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
body {
    background: #fff;
    color: #222;
    padding: 0;
    margin: 0;
    font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: auto;
    position: relative;
    cursor: auto;
}
Inherited from html
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
Pseudo ::before element
*, *:before, *:after {
    box-sizing: border-box;
}
Pseudo ::after element
*, *:before, *:after {
    box-sizing: border-box;
}

上面你会看到-moz-appearance出现在悬停状态，但它显示为灰色，因为我在Chrome上查看它： .woocommerce .quantity .qty：hover { -moz-appearance：数字输入; }

知道我缺少什么吗？

在非悬停状态下显示号码输入

0 个答案: