The Select with Style project download contains two modules containing three styleable widgets:

Slide with Style, contains a field widget to enter numbers or list values via sliders when creating content and also to filter using this widget in Views. This includes double-handled sliders to input "in-between" ranges.
Select with Style, comprises two widgets to enter taxonomy fields, in particular hierarchical taxonomies, when creating content and also to filter by these taxonomy fields in Views

These are light-weight solutions that have no external dependencies. No external libraries are required. Only minimum configuration, no permissions, no coding. Just style!

Slide with Style

You'll see this widget pop up under the name "Slider" in the widget select drop-down of fields of the number (integer, float, decimal) or list (text, number) types. After you've selected it, you'll be given a number of styling options, like orientation (horizontal or vertical) and whether to show an edit field and/or value balloon with the slider. You can pick from a couple of color schemes, shown on the right, or use these as a base to add your own CSS.
When the widget is used as a filter in Views or Views Global Filter the slider can optionally be configured as a range slider with two sliding handles to set "from" and "to" values.

Select with Style

Allows you to attractively style taxonomies, in particular those with parent/child hierarchies. This module adds CSS classes that reflect the "families" and depths in the hierarchy. Taking advantage of these you can render one family differently from another and/or differently from their children. You can apply colours, font styles or even images, like flags. When configuring the widget you can select from a number of included "skins" (.css files). Or roll your own CSS. To create a select drop-down or select box with flag images as shown, all you have to do is select the flag.css skin, as over 240 country flag icons come included with the module.
You can set the height of multi-choice select boxes too; in the pictured examples it is 13.
You may also configure the hierarchy depth indicator prefix, using any sequence of UTF-8 characters instead of core's boring single hyphen. In the picture on the right we went for '♥ '. Some more symbols you can simply copy and paste into the field configuration form can be found here.

The Select with Style widgets enter your "Manage Fields" UI through two new variants of the classic "Select list" widget, when you select a widget for a field of type type term reference. The new widgets are:

Select list, styled tree (3rd image, with corresponding taxonomy below it and bottom picture)
Select list, styled optgroups (5th image)

The two widgets are similar in appearance, but different in functionality. In the styled optgroups parent options become labels, which cannot be selected (clicked), whereas in the styled tree the parents are selectable options, just like the children. Another difference between the styled optgroups and the styled tree is that due to W3C/browser restrictions optgroups only go one level deep, whereas trees can be nested as deep as your taxonomy dictates.

Take advantage of these CSS classes for a parent label or option:
class="option-parent group-PARENT tid-# depth-#"
and these for a child option:
class="option-child group-PARENT tid-# depth-#"
Where PARENT is the name of the parent taxonomy term and # denotes an integer number.

Slide with Style and Select with Style widgets work with fields on content edit forms, user profiles, in Views exposed filters and with Views Global Filter.

HTML/CSS disclaimer

Anno 2014 browser support for select drop-downs and boxes is still poor. Firefox, Opera and IE are generally tops. Chrome and Safari (i.e. Webkit) honour colours, but lack attributes that are standard on other HTML elements. This is especially so for single-choice drop-downs. Also the final result sometimes depends on the OS and other attributes used! See this great CSS tricks article and its comments.
Finally, while Select with Style does not require any javascript, you may choose to add some special effects. For examples see the file select_with_style.js, included with the package and the Drupal wrapper around the jQuery solution Chosen.

Similar modules

As an alternative to Slide with Style you may want to look at SliderField. At the time of writing this module did not support the use of sliders in Views.

FAQ's

Q: How do I configure my View to use the Slide with Style and Select with Style widgets?
There is no Views configuration for these widgets. Once assigned to a field on the content type, the widget will automatically appear in both the content edit form and in Views (if enabled) when you add an exposed filter to the field. If that isn't clear enough, see the README for Slide with Style and README for Select with Style for step-by-step guides.

Q: How did you do the flags?
A: Easily! Flags of the countries of the world are already included in the Select with Style package download, so you don't have to add any images (but you can add more if you want to). Just select the flags.css "skin" when you configure the widget for your country/city taxonomy term field. See the README, section HOW TO CREATE A COUNTRY & CITY DROP-DOWN WITH FLAG IMAGES?

Here are a few more tips for making the most out of your styled selects:
http://bavotasan.com/2011/style-select-box-using-only-css

More flags, anyone?

Development sponsored by flink, the Drupal experts collective.

Select with Style

Issues

The left-associativity of the ternary operator has been deprecated in PHP 7.4 RTBCCode Created almost 4 years ago

The left-associativity of the ternary operator has been deprecated in PHP 7.4
RTBC
Code
Created almost 4 years ago