Style Guide version 1.1

Dropdown Selection

Vertical
Alabama

All drop down fields are relative to input fields and possess the same active-state structure.
All drop down fields have label.
Arrows for drop down are different between horizontal and vertical (even though they shouldn’t).

  • Horizontal Drop Down Selection – Seen on Payment Page (CVV). Normally 2 elements on single line.
  • Vertical Drop Down Selection – Seen throughout. 1 element on single line.
  • Header Drop Down Selection – It’s own unique styling appropriate for the header
  • Footer Drop Down Selection – boxed/enclosed style.

<div id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown" class="qd label-div">
	<label class="que selectLabel">
		<span id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown_lb">Where is the rental property located? </span>
	</label>
	<div class="ans group group-ans">
		<div class="selectWrap">
			<select id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown_in" name="ctl00$Content$ctrlQuestions$ctl87$ctl06$ctl05$cDropDown">
				<option value="AL" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__0" selected="selected">
					Alabama
				</option><option value="AK" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__1">
					Alaska
				</option><option value="AZ" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__2">
					Arizona
				</option><option value="AR" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__3">
					Arkansas
				</option><option value="CA" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__4">
					California
				</option><option value="CO" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__5">
					Colorado
				</option><option value="CT" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__6">
					Connecticut
				</option><option value="DE" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__7">
					Delaware
				</option><option value="DC" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__8">
					District of Columbia
				</option><option value="FL" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__9">
					Florida
				</option><option value="GA" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__10">
					Georgia
				</option><option value="HI" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__11">
					Hawaii
				</option><option value="ID" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__12">
					Idaho
				</option><option value="IL" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__13">
					Illinois
				</option><option value="IN" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__14">
					Indiana
				</option><option value="IA" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__15">
					Iowa
				</option><option value="KS" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__16">
					Kansas
				</option><option value="KY" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__17">
					Kentucky
				</option><option value="LA" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__18">
					Louisiana
				</option><option value="ME" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__19">
					Maine
				</option><option value="MD" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__20">
					Maryland
				</option><option value="MA" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__21">
					Massachusetts
				</option><option value="MI" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__22">
					Michigan
				</option><option value="MN" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__23">
					Minnesota
				</option><option value="MS" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__24">
					Mississippi
				</option><option value="MO" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__25">
					Missouri
				</option><option value="MT" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__26">
					Montana
				</option><option value="NE" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__27">
					Nebraska
				</option><option value="NV" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__28">
					Nevada
				</option><option value="NH" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__29">
					New Hampshire
				</option><option value="NJ" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__30">
					New Jersey
				</option><option value="NM" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__31">
					New Mexico
				</option><option value="NY" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__32">
					New York
				</option><option value="NC" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__33">
					North Carolina
				</option><option value="ND" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__34">
					North Dakota
				</option><option value="OH" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__35">
					Ohio
				</option><option value="OK" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__36">
					Oklahoma
				</option><option value="OR" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__37">
					Oregon
				</option><option value="PA" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__38">
					Pennsylvania
				</option><option value="RI" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__39">
					Rhode Island
				</option><option value="SC" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__40">
					South Carolina
				</option><option value="SD" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__41">
					South Dakota
				</option><option value="TN" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__42">
					Tennessee
				</option><option value="TX" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__43">
					Texas
				</option><option value="UT" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__44">
					Utah
				</option><option value="VT" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__45">
					Vermont
				</option><option value="VA" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__46">
					Virginia
				</option><option value="WA" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__47">
					Washington
				</option><option value="WV" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__48">
					West Virginia
				</option><option value="WI" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__49">
					Wisconsin
				</option><option value="WY" id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown__50">
					Wyoming
				</option>
			</select><span class="selectInner">
					Alabama
				</span>
		</div><div class="ansOther">
			<div id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown_cOther" class=" qd sOther   " style="display:none;">
				<div class="ans group group-ans">
					<input id="ctl00_Content_ctrlQuestions_ctl87_ctl06_ctl05_cDropDown_cOther_in" name="ctl00$Content$ctrlQuestions$ctl87$ctl06$ctl05$cDropDown$cOther" maxlength="200" value="" autocorrect="off"><span class="input-highlight"></span><span class="bar"></span>
				</div>
			</div>
		</div>
	</div>
</div>
								

Expiry Date

A Selection Button can sometimes includes a description beneath it. The Non-Disclousre Agreement and Power of Attorney are examples of buttons with description text.


	<button class="largeActiveButton">Cancel Subscription</button>		
	<button class="largeInactiveButton">Cancel Subscription</button> 	
	<button class="largeActiveButton">Submit</button> 	
	<button class="largeInactiveButton">Cancel</button> 		
	
Header

A Selection Button can sometimes includes a description beneath it. The Non-Disclousre Agreement and Power of Attorney are examples of buttons with description text.


	<button class="largeActiveButton">Cancel Subscription</button>		
	<button class="largeInactiveButton">Cancel Subscription</button> 	
	<button class="largeActiveButton">Submit</button> 	
	<button class="largeInactiveButton">Cancel</button> 		
	
Country Selector

A Selection Button can sometimes includes a description beneath it. The Non-Disclousre Agreement and Power of Attorney are examples of buttons with description text.


	<button class="largeActiveButton">Cancel Subscription</button>		
	<button class="largeInactiveButton">Cancel Subscription</button> 	
	<button class="largeActiveButton">Submit</button> 	
	<button class="largeInactiveButton">Cancel</button>