I’ve noticed that the arrows on custom dropdown menus (.woo-select) cannot be clicked. This has been discussed a few times in the forums, but the solutions seemed a little kludgy to me. In any event, adding the following to your CSS file will eliminate the problem.
. {
pointer-events: none;
}
I’ve also noticed the use of additional span elements to style the custom dropdown boxes, as seen here for the “Default Sorting” dropdown used in the store:
<span class="woo-select orderby" style="display: inline-block;">
<span class="woo-selectInner" style="width: 190px; display: inline-block;">Default Sorting</span>
</span>
The additional span elements really aren’t required; I am assuming that they are there to prevent IE from adding its own fugly dropdown styling over the FontAwesome arrows added to the span elements using the :after pseudo-element.
.woocommerce-ordering .woo-select:after {
content: "\f107";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline;
font-size: 12px;
opacity: 0.7;
margin-left: -10px;
}
I eliminated the need for this in my own dropdown elements by adding the FontAwesome arrow directly to the dropdown (select) element.
#my_custom_dropdown:after {
content: "\f107";
display: block;
float: right;
font-family: FontAwesome;
font-size: 12px;
opacity: 0.7;
margin-right: 17px;
margin-top: -40px;
pointer-events: none;
}
The following style rules make the custom dropdown look the same as they do currently:
#my_custom_dropdown {
border-left: none;
border-radius: 0;
border-right: none;
border-top: none;
height: 40px;
width: 100%;
-webkit-transition: border linear .2s, box-shadow linear .2s;
-moz-transition: border linear .2s, box-shadow linear .2s;
-o-transition: border linear .2s, box-shadow linear .2s;
transition: border linear .2s, box-shadow linear .2s;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
This is probably not the clearest explanation, once I have the site I’m currently developing up I will post a link if anyone would like to see it in action. It’s pretty straightforward when you see it in situ. Ultimately, this just allows you to remove some unnecessary span elements and cleans up the code a bit. This method also allows you to style the WooCommerce dropdowns used in the checkout pages, e.g. address dropdowns for State/Province, so they are consistent with the dropdowns used everywhere else.
Hope this helps someone.
.