Custom Dropdown Menus Issues and Solution

[Wintermute]

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.

[Wintermute]

I forgot to add the following which is needed to hide the arrows from the IE native controls:

::-ms-expand {
	display: none;
}

For whatever reason the code I posted in the first post got mangled. The first code element should read:

.woo-select:after {
	pointer-events: none;
}

[Wintermute]

I forgot to mention, this method makes the custom dropdown menus less fragile when being resized. There are a few cases where this is evident, for example here. When resizing the window the country dropdown is borked.

[DAPPER-tekstenweb]

Hi,

I’m not a programmer, and I did not understand much of that. But, if I want to display the dropdown on my homepage more distinct. You’ll see it really short, and then it’s gone again. It’s on the right side of my page, http://galerietje.emeticus.nl/shop/: above the most top right image you’ll see two horizontal lines. There it is.

How can I make this stand out more?

[Melanie – SUPPORT]

Hi,
DAPPER can you open a new thread for your issue? Your question, while it might be similar, is most likely different and requires a different approach. Also, posting to an existing (and probably old) thread will most likely lack currentness and furthermore lack the opportunity to post login details private in case we need them.

Wintermute I will forward your thread to the developer of the theme.

All the best