Checkboxes and arrows in dropdown menus disappear

  • Resolved Calitoe

    (@calitoe)


    4 years, 4 months ago

    Hello,

    When I activate the plugin, the arrows from the dropdown menus and the checkboxes in my theme disappear. I checked all the stylesheets in the css folder and I was able to fix the dropdown menus issue for Firefox removing some -webkit-appearance: none, but I have no idea about how to solve the issue for other browsers or to the make the check boxes appear again other than disabling the plugin.

    Any help with this?

    Thank you.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter Calitoe

    (@calitoe)

    OK, never mind. I managed to override it via custom CSS in my theme using this code:

    input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

select {
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

    Thank you.

    Hi,

    I have the same problem, if I activate the Salon Booking System plugin the WooCommerce checkboxes disappear (they work but visually it does not change and the user does not understand the selection).

    Any ideas on how to fix it?

    link: piccolosalone.ch

    Thread Starter Calitoe

    (@calitoe)

    Hi, @luhna,

    As I mention on my own reply, in the end I managed to fix it via custom CSS in my theme using this code:

    
input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

select {
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

    Good luck!

    Hi @calitoe

    I tried your code but it doesn’t seem work on my site ??
    I try one more time. Thank you

    Your code works partially, some checkboxes (e.g. “Ship to a different address?”) are modified while others (shipping method and payment method) are not.

    I try to double check the code!

    Anyway thanks for your help

    Resolved! Thanks @calitoe with your code I did several tests and I found the solution. Now I’ve done some tests and everything seems to be working.

    Here the code that I used maybe it can serve others:

    .woocommerce-form__input .woocommerce-form__input-checkbox .input-checkbox {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    -o-appearance: none;
    appearance: checkbox;
}

.shipping_method {
     -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    -o-appearance: none;
    appearance: checkbox;
}

.input-radio {
     -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    -o-appearance: none;
    appearance: checkbox;
}
    capitancapo

    (@capitancapo)

    Thank you, it worked for me too

    Had the same issue with Contact Form 7 and fixed it overriding it with CSS but this is dumb. The plugin shouldn’t apply those styles globally.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Checkboxes and arrows in dropdown menus disappear’ is closed to new replies.