styling-select-boxes

Your select boxes can be an incredibly functional element on your website. Here's how to style it to match the rest of your website's branding elements. Default select boxes are pretty minimal. They can be one of the most functional parts of a website. Select boxes give your website visitors a better way to narrow down large quantities of information and direct them to where they need to go.

Tutorial

For detailed instruction's, view Solodev's How to Style Your Select Boxes article.

Demo

Try out a working example on JSFiddle.

HTML

The tutorial contains the following basic HTML markup.

<div class="ct-find-service">
	<h2>Find the CMS Right for You</h2>
	<div class="ct-select-group ct-js-select-group">
		<select class="ct-select ct-js-select" id="cms-features" name="CMS Features">
			<option>CMS Features</option>
			<option value="Cloud Hosting">Cloud Hosting</option>
			<option value="API Integrations">API Integrations</option>
			<option value="AB Testing">A/B Testing</option>
			<option value="Built-in Modules">Built-in Modules</option>			
		</select>
	</div>
	<div class="ct-select-group ct-js-select-group">
		<select class="ct-select ct-js-select" id="product-capabilities" name="Product Capabilities">
			<option>Product Capabilities</option>
			<option value="Create Website">Create Websites</option>
			<option value="Secure Cloud Hosting">Secure Cloud Hosting</option>
			<option value="Engage Your Audience">Engage Your Audience</option>
			<option value="24/7 Maintenance">24/7 Maintenance</option>			
		</select>
	</div>
	<div class="ct-select-group ct-js-select-group">
		<select class="ct-select ct-js-select" id="pricing-options" name="Pricing Options">
			<option>Pricing Options</option>
			<option value="Cadet">Cadet</option>
			<option value="Pilot">Pilot</option>
			<option value="Captain">Captain</option>
			<option value="Commander">Commander</option>			
		</select>
	</div>
	<div class="ct-select-group ct-js-select-group">
		<select class="ct-select ct-js-select" id="resources" name="Resources">
			<option>Available Resources</option>
			<option value="Ebooks">Ebooks</option>
			<option value="Case Studies">Case Studies</option>
			<option value="Infographics">Infographics</option>
			<option value="News Items">News Items</option>			
		</select>
	</div>
</div>

CSS

All required CSS is contained with styling-select-boxes.css

External Resources

This tutorial requires no external resources