I have a test online store on wordpress + woocommerce . Using the jQuery Form library, Styler connected $('select').styler(); and stylized a drop-down list (added to the checkout page for clarity).

enter image description here

Why is the drop-down list at the very bottom of the same page the only one that is not styled on the entire site?

Rather, it is styled from the very beginning, but after a moment, some script with a white veil is loaded and redefines it to the original ones.

    2 answers 2

    It's all about the number of scripts that you ship, the styler simply stops working, not reaching the second select. Locally script gets enter image description here

    Details of the test speak for themselves, I recommend throwing off the page load time to at least 3 seconds, since meaning from 70 scripts with effects, if no one waits for them? ..

    215 Requests CARL !!!

    • that's why it is a test one) thanks for the analysis - I caught the idea, but the trick is that if I leave only the bottom block on the page with payment - I have time to notice that the styler got to the 2nd select, then a white translucent sheet appears when loading and it is redefined again to the original one, so I think that simply reducing the load time will not fix this matter .. - Vasya
    • @ Vasya, I was talking about loading time in the sense that someone would hardly accept your store, which loads the page for more than 3 seconds. A potential buyer will simply leave the site or wait, but the first impression of the store will be bad. by select - I think styler.js conflicts with some of the scripts that go further in the download queue, but it turned out locally because many of the scripts simply did not load. I myself refused this script, in favor of html5 / css3 + a couple of scripts so that in old browsers there was an order that is already needed. - Neka
    • Can you bring or reproduce an alternative where? - Vasya
    • @ Vasya, you can see an example here - webdesign.tutsplus.com/articles ... ... or search css3 style form checkbox radio select on the web something like this - Neka
    • one
      @ Vasya, catch it - cssdeck.com/labs/styling-select-box-with-css3 , jsfiddle.net/leaverou/XxkSC/light - Neka

    In general, I did not find a better solution than overriding with a timeout

     setTimeout(function(){ $('select').styler(); console.log("yes"); },1900);