Wrap select lists in a container class to support custom dropdown FontAwesome/etc icons
CSS doesn't let you currently use ::before
/::after
on a 'select' element - so if you want to use a custom dropdown icon on your select lists, you need to use a background image, as Shoreditch does:
Most select list frameworks get around this by wrapping the select list in a container div, which can then have the before/after applied, or in the case of Select2 put the arrow in its own span - but still wrap the entire list with .select2-container.
As a result of this difference, a theme wanting a single dropdown style (ie not leaving this to the browser to define) needs to select a FontAwesome/etc text icon for Select2, and make an image sprite version of this for regular Selects (with all the limitations on size/colour/transitions around image sprites).
A simpler fix for Civi's numerous non-Select2 lists might just be to use something like .crm-select-wrapper
. E.g.
<div class="crm-select-wrapper">
<select id="something" class="crm-form-select">
<option etc>
</select>
</div>
Then .crm-select-wrapper::after
can define a character/icon that's the same as for Select2, e.g.. font-family: FontAwesome; content: '\f107';
etc.
This is a suggestion as part of the markup cleanup/documentation project - maybe there are other improvements to select list handling that might benefit from accompanying this? cc @artfulrobot.
Related issue: core#3292 (comment 159472)