Basic select

Basic

Province/State ^*

I’m applying for

Which Best Describes You?

Your Level of Education

Line

Province/State ^*

I’m applying for

Which Best Describes You?

Your Level of Education

Icon Square

Province/State ^*

I’m applying for

Which Best Describes You?

Your Level of Education

Select Icon

Province/State ^*

I’m applying for

Which Best Describes You?

Your Level of Education

Line Icon

Province/State ^*

I’m applying for

Which Best Describes You?

Your Level of Education

Modern Use

PHP

<form action="/" method="post" autocomplete="off" enctype="multipart/form-data">
	<!-- Basic -->
		
	<!-- Default Select -->
	<div class="form_item">
		<span class="pre_input">Province/State <sup class="red">*</sup></span>
		<label class="label_select">
			<select name="state" class="input">
				<option value="" selected disabled>Select Province</option>
				<option value="AB">Alberta</option>
				<option value="BC">British Columbia</option>
				<option value="MB">Manitoba</option>
				<option value="NB">New Brunswick</option>
				<option value="NL">Newfoundland and Labrador</option>
				<option value="NS">Nova Scotia</option>
				<option value="ON">Ontario</option>
				<option value="PE">Prince Edward Island</option>
				<option value="QC">Quebec</option>
				<option value="SK">Saskatchewan</option>
				<option value="NT">Northwest Territories</option>
				<option value="NU">Nunavut</option>
				<option value="YT">Yukon</option>
			</select>
		</label>
	</div>
		
	<!-- Select ::after -->
	<div class="form_item">
		<span class="pre_input">I’m applying for</span>
		<label class="select_after">
			<select name="applying" class="input">
				<option value="" selected disabled>Please select one</option>
				<option value="Company Driver">Company Driver</option>
				<option value="Owner Operator">Owner Operator</option>
			</select>
		</label>
	</div>
		
	<!-- Select svg -->
	<div class="form_item">
		<span class="pre_input">Which Best Describes You?</span>
		<label class="select_img">
			<select name="purpose" class="input">
				<option value="">Please select one</option>
				<option value="Homeowner">Homeowner</option>
				<option value="Landscape Architect">Landscaper/Landscape Designer</option>
				<option value="Property Manager">Property Manager</option>
				<option value="Golf Course">Golf Course</option>
				<option value="Dog Boarding">Dog Facility</option>
				<option value="Other">Other</option>
			</select>
			<?= svg('iconSelect','')?>
		</label>
	</div>
		
	<!-- Select background -->
	<div class="form_item">
		<span class="pre_input">Your Level of Education</span>
		<label>
			<select name="education" class="input || select_bg">
				<option value="">Choose</option>
				<option value="School">School</option>
				<option value="1 year of college">1 year of college</option>
				<option value="2 year of college">2 year of college</option>
				<option value="Bachelor's diploma">Bachelor's diploma</option>
				<option value="Master's degree">Master's degree</option>
				<option value="Ph.D">Ph.D</option>
			</select>
		</label>
	</div>

		
	<!-- Line -->
	<div class="form_item">
		<span class="pre_input">Province/State <sup class="red">*</sup></span>
		<label class="label_select || label_line">
			<select name="state" class="input_line">
				<option value="" selected disabled>Select Province</option>
				<option value="AB">Alberta</option>
				<option value="BC">British Columbia</option>
				<option value="MB">Manitoba</option>
				<option value="NB">New Brunswick</option>
				<option value="NL">Newfoundland and Labrador</option>
				<option value="NS">Nova Scotia</option>
				<option value="ON">Ontario</option>
				<option value="PE">Prince Edward Island</option>
				<option value="QC">Quebec</option>
				<option value="SK">Saskatchewan</option>
				<option value="NT">Northwest Territories</option>
				<option value="NU">Nunavut</option>
				<option value="YT">Yukon</option>
			</select>
		</label>
	</div>
		
	<div class="form_item">
		<span class="pre_input">I’m applying for</span>
		<label class="select_after || label_line">
			<select name="applying" class="input_line">
				<option value="" selected disabled>Please select one</option>
				<option value="Company Driver">Company Driver</option>
				<option value="Owner Operator">Owner Operator</option>
			</select>
		</label>
	</div>
		
	<div class="form_item">
		<span class="pre_input">Which Best Describes You?</span>
		<label class="select_img || label_line">
			<select name="purpose" class="input_line">
				<option value="">Please select one</option>
				<option value="Homeowner">Homeowner</option>
				<option value="Landscape Architect">Landscaper/Landscape Designer</option>
				<option value="Property Manager">Property Manager</option>
				<option value="Golf Course">Golf Course</option>
				<option value="Dog Boarding">Dog Facility</option>
				<option value="Other">Other</option>
			</select>
			<?= svg('iconSelect','')?>
		</label>
	</div>
		
	<div class="form_item">
		<span class="pre_input">Your Level of Education</span>
		<label>
			<select name="education" class="input_line || select_bg">
				<option value="">Choose</option>
				<option value="School">School</option>
				<option value="1 year of college">1 year of college</option>
				<option value="2 year of college">2 year of college</option>
				<option value="Bachelor's diploma">Bachelor's diploma</option>
				<option value="Master's degree">Master's degree</option>
				<option value="Ph.D">Ph.D</option>
			</select>
		</label>
	</div>
		
	
	<!-- Icon Square -->
	<div class="form_item">
		<span class="pre_input">Province/State <sup class="red">*</sup></span>
		<div class="input_icon">
			<div class="svg_wrap">
				<?= svg('iconLocation6','') ?>
			</div>
			<div class="input_wrap">
				<label class="label_select">
					<select name="state" class="input">
						<option value="" selected disabled>Select Province</option>
						<option value="AB">Alberta</option>
						<option value="BC">British Columbia</option>
						<option value="MB">Manitoba</option>
						<option value="NB">New Brunswick</option>
						<option value="NL">Newfoundland and Labrador</option>
						<option value="NS">Nova Scotia</option>
						<option value="ON">Ontario</option>
						<option value="PE">Prince Edward Island</option>
						<option value="QC">Quebec</option>
						<option value="SK">Saskatchewan</option>
						<option value="NT">Northwest Territories</option>
						<option value="NU">Nunavut</option>
						<option value="YT">Yukon</option>
					</select>
				</label>
			</div>
		</div>
	</div>
		
	<div class="form_item">
		<span class="pre_input">I’m applying for</span>
		<div class="input_icon">
			<div class="svg_wrap">
				<?= svg('iconSuitcase4','') ?>
			</div>
			<div class="input_wrap">
				<label class="select_after">
					<select name="applying" class="input">
						<option value="" selected disabled>Please select one</option>
						<option value="Company Driver">Company Driver</option>
						<option value="Owner Operator">Owner Operator</option>
					</select>
				</label>
			</div>
		</div>
	</div>
		
	<div class="form_item">
		<span class="pre_input">Which Best Describes You?</span>
		<div class="input_icon">
			<div class="svg_wrap">
				<?= svg('iconUser4','') ?>
			</div>
			<div class="input_wrap">
				<label class="select_img">
					<select name="purpose" class="input">
						<option value="">Please select one</option>
						<option value="Homeowner">Homeowner</option>
						<option value="Landscape Architect">Landscaper/Landscape Designer</option>
						<option value="Property Manager">Property Manager</option>
						<option value="Golf Course">Golf Course</option>
						<option value="Dog Boarding">Dog Facility</option>
						<option value="Other">Other</option>
					</select>
					<?= svg('iconSelect','')?>
				</label>
			</div>
		</div>
	</div>
		
	<div class="form_item">
		<span class="pre_input">Your Level of Education</span>
		<div class="input_icon">
			<div class="svg_wrap">
				<?= svg('iconMortarboard','') ?>
			</div>
			<div class="input_wrap">
				<label>
					<select name="education" class="input || select_bg">
						<option value="">Choose</option>
						<option value="School">School</option>
						<option value="1 year of college">1 year of college</option>
						<option value="2 year of college">2 year of college</option>
						<option value="Bachelor's diploma">Bachelor's diploma</option>
						<option value="Master's degree">Master's degree</option>
						<option value="Ph.D">Ph.D</option>
					</select>
				</label>
			</div>
		</div>
	</div>
	
		
	<!-- Select Icon -->
	<div class="form_item">
		<span class="pre_input">Province/State <sup class="red">*</sup></span>
		<label class="label_select || label_input_icon || label_select_icon">
			<select name="state" class="input">
				<option value="" selected disabled>Select Province</option>
				<option value="AB">Alberta</option>
				<option value="BC">British Columbia</option>
				<option value="MB">Manitoba</option>
				<option value="NB">New Brunswick</option>
				<option value="NL">Newfoundland and Labrador</option>
				<option value="NS">Nova Scotia</option>
				<option value="ON">Ontario</option>
				<option value="PE">Prince Edward Island</option>
				<option value="QC">Quebec</option>
				<option value="SK">Saskatchewan</option>
				<option value="NT">Northwest Territories</option>
				<option value="NU">Nunavut</option>
				<option value="YT">Yukon</option>
			</select>
			<?= svg('iconLocation6','') ?>
		</label>
	</div>
		
	<div class="form_item">
		<span class="pre_input">I’m applying for</span>
		<label class="select_after || label_input_icon || label_select_icon">
			<select name="applying" class="input">
				<option value="" selected disabled>Please select one</option>
				<option value="Company Driver">Company Driver</option>
				<option value="Owner Operator">Owner Operator</option>
			</select>
			<?= svg('iconSuitcase4','') ?>
		</label>
	</div>
		
	<div class="form_item">
		<span class="pre_input">Which Best Describes You?</span>
		<label class="select_img || label_input_icon || label_select_icon">
			<select name="purpose" class="input">
				<option value="">Please select one</option>
				<option value="Homeowner">Homeowner</option>
				<option value="Landscape Architect">Landscaper/Landscape Designer</option>
				<option value="Property Manager">Property Manager</option>
				<option value="Golf Course">Golf Course</option>
				<option value="Dog Boarding">Dog Facility</option>
				<option value="Other">Other</option>
			</select>
			<?= svg('iconUser4','') ?>
			<?= svg('iconSelect','select_img_icon')?>
		</label>
	</div>
		
	<div class="form_item">
		<span class="pre_input">Your Level of Education</span>
		<label class="label_line || label_input_icon || label_select_icon">
			<select name="education" class="input || select_bg">
				<option value="">Choose</option>
				<option value="School">School</option>
				<option value="1 year of college">1 year of college</option>
				<option value="2 year of college">2 year of college</option>
				<option value="Bachelor's diploma">Bachelor's diploma</option>
				<option value="Master's degree">Master's degree</option>
				<option value="Ph.D">Ph.D</option>
			</select>
			<?= svg('iconMortarboard','') ?>
		</label>
	</div>
	
		
	<!-- Line Icon -->
	<div class="form_item">
		<span class="pre_input">Province/State <sup class="red">*</sup></span>
		<label class="label_select || label_input_line_icon || label_select_line_icon">
			<select name="state" class="input_line">
				<option value="" selected disabled>Select Province</option>
				<option value="AB">Alberta</option>
				<option value="BC">British Columbia</option>
				<option value="MB">Manitoba</option>
				<option value="NB">New Brunswick</option>
				<option value="NL">Newfoundland and Labrador</option>
				<option value="NS">Nova Scotia</option>
				<option value="ON">Ontario</option>
				<option value="PE">Prince Edward Island</option>
				<option value="QC">Quebec</option>
				<option value="SK">Saskatchewan</option>
				<option value="NT">Northwest Territories</option>
				<option value="NU">Nunavut</option>
				<option value="YT">Yukon</option>
			</select>
			<?= svg('iconLocation6','') ?>
		</label>
	</div>
		
	<div class="form_item">
		<span class="pre_input">I’m applying for</span>
		<label class="select_after || label_input_line_icon || label_select_line_icon">
			<select name="applying" class="input_line">
				<option value="" selected disabled>Please select one</option>
				<option value="Company Driver">Company Driver</option>
				<option value="Owner Operator">Owner Operator</option>
			</select>
			<?= svg('iconSuitcase4','') ?>
		</label>
	</div>
		
	<div class="form_item">
		<span class="pre_input">Which Best Describes You?</span>
		<label class="select_img || label_input_line_icon || label_select_line_icon">
			<select name="purpose" class="input_line">
				<option value="">Please select one</option>
				<option value="Homeowner">Homeowner</option>
				<option value="Landscape Architect">Landscaper/Landscape Designer</option>
				<option value="Property Manager">Property Manager</option>
				<option value="Golf Course">Golf Course</option>
				<option value="Dog Boarding">Dog Facility</option>
				<option value="Other">Other</option>
			</select>
			<?= svg('iconUser4','') ?>
			<?= svg('iconSelect','select_img_icon')?>
		</label>
	</div>
		
	<div class="form_item">
		<span class="pre_input">Your Level of Education</span>
		<label class="label_input_line_icon || label_select_line_icon">
			<select name="education" class="input_line || select_bg">
				<option value="">Choose</option>
				<option value="School">School</option>
				<option value="1 year of college">1 year of college</option>
				<option value="2 year of college">2 year of college</option>
				<option value="Bachelor's diploma">Bachelor's diploma</option>
				<option value="Master's degree">Master's degree</option>
				<option value="Ph.D">Ph.D</option>
			</select>
			<?= svg('iconMortarboard','') ?>
		</label>
	</div>
</form>

CSS

select.input{line-height:normal}
select::-ms-expand{display:none}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub.red,sup.red{color:#e31e26}

/* Default Select */
.label_select{display:block;position:relative}
.label_select::after{content:"";position:absolute;top:37%;right:1.2rem;width:.8rem;height:.8rem;border:none;border-bottom:.2rem solid #86919a;border-right:.2rem solid #86919a;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);pointer-events:none}
.label_select select{padding:0 3rem 0 1rem;appearance:none;-moz-appearance:none;-webkit-appearance:none}

/* Select ::after */
.select_after{position:relative;display:block}
.select_after::after{content:'';position:absolute;top:1.9rem;right:1rem;width:0;height:0;border-style:solid;border-width:.5rem .5rem 0;border-color:gray transparent transparent;pointer-events:none}
.select_after select{padding:0 3rem 0 1rem;appearance:none;-moz-appearance:none;-webkit-appearance:none}

/* Select svg */
.select_img{position:relative;display:inline-block;width:100%}
.select_img .icon{position:absolute;top:1.3rem;right:1rem;width:1.6rem;height:1.6rem;color:#09a5be;pointer-events:none}
.select_img select{padding:0 3rem 0 1rem;appearance:none;-moz-appearance:none;-webkit-appearance:none}

/* Select background */
.select_bg{background-image:url(/img/up-and-down.svg);background-repeat:no-repeat;-webkit-background-size:1.5rem 1.5rem;-moz-background-size:1.5rem 1.5rem;-o-background-size:1.5rem 1.5rem;background-size:1.5rem 1.5rem;background-position:-webkit-calc(100% - 1rem) 50%;background-position:-moz-calc(100% - 1rem) 50%;background-position:calc(100% - 1rem) 50%;padding:0 3rem 0 1rem;appearance:none;-moz-appearance:none;-webkit-appearance:none}

/* Select line */
.label_select.label_line::after{right:.2rem}
.label_select.label_line .input_line{padding:0 3rem 0 0}
.select_after.label_line::after{right:0}
.select_after.label_line .input_line{padding:0 3rem 0 0}
.select_img.label_line .icon{right:0}
.select_img.label_line .input_line{padding:0 3rem 0 0}
.select_bg.input_line{background-position:100% 50%;padding:0 3rem 0 0}

/* Select with icons */
.label_select_icon.label_input_icon .icon{color:#989898}
.label_select_icon.label_input_icon .select_img_icon{left:auto;color:#09a5be}
.label_select_icon.label_input_icon .input{padding:0 3rem 0 3.5rem}

/* Select line with icons */
.label_select.label_select_line_icon::after{right:.2rem}
.select_after.label_select_line_icon::after{right:0}
.label_select_line_icon.label_input_line_icon .icon{color:#989898}
.label_select_line_icon.label_input_line_icon .select_img_icon{left:auto;right:0;color:#09a5be}
.label_select_line_icon.label_input_line_icon .input_line{padding:0 3rem 0 2.5rem}

SCSS

/* Vars */
$cb:               #000000;
$red:              #e31e26;
$main:             #09a5be;
$inputIconColor:   #989898;

select.input {
	line-height: normal;
	text-overflow: '';
}

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

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	
	&.red {
		color: $red;
	}
}

/* Default Select */
.label_select {
	display: block;
	position: relative;
	
	&::after {
		content: "";
		position: absolute;
		top: 37%;
		right: 1.2rem;
		width: .8rem;
		height: .8rem;
		border: none;
		border-bottom: 0.2rem solid #86919a;
		border-right: 0.2rem solid #86919a;
		transform:rotate(45deg);
		pointer-events: none;
	}
	
	select {
		padding: 0 3rem 0 1rem;
		appearance: none;
		-moz-appearance:none;
		-webkit-appearance:none;
	}
}

/* Select ::after */
.select_after {
	position: relative;
	display: block;
	
	&::after {
		content: '';
		position: absolute;
		top: 1.9rem;
		right: 1rem;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: .5rem .5rem 0 .5rem;
		border-color: #808080 transparent transparent transparent;
		pointer-events: none;
	}
	
	select {
		padding: 0 3rem 0 1rem;
		appearance: none;
		-moz-appearance:none;
		-webkit-appearance:none;
	}
}

/* Select svg */
.select_img {
	position: relative;
	display: inline-block;
	width: 100%;
	
	.icon {
		position: absolute;
		top: 1.3rem;
		right: 1rem;
		width: 1.6rem;
		height: 1.6rem;
		color: $main;
		pointer-events: none;
	}
	
	select {
		padding: 0 3rem 0 1rem;
		appearance: none;
		-moz-appearance:none;
		-webkit-appearance:none;
	}
}

/* Select background */
.select_bg {
	background-image: url(/img/up-and-down.svg);
	background-repeat: no-repeat;
	background-size: 1.5rem 1.5rem;
	background-position: calc(100% - 1rem) 50%;
	padding: 0 3rem 0 1rem;
	appearance: none;
	-moz-appearance:none;
	-webkit-appearance:none;
}

/* Select line */
.label_select.label_line {
	&::after {
		right: .2rem;
	}
	
	.input_line {
		padding: 0 3rem 0 0;
	}
}

.select_after.label_line {
	&::after {
		right: 0;
	}
	
	.input_line {
		padding: 0 3rem 0 0;
	}
}

.select_img.label_line {
	.icon {
		right: 0;
	}
	
	.input_line {
		padding: 0 3rem 0 0;
	}
}

.select_bg.input_line {
	background-position:100% 50%;
	padding: 0 3rem 0 0;
}

/* Select with icons */
.label_select_icon.label_input_icon {
	.icon {
		color: $inputIconColor;
	}
	
	.select_img_icon {
		left: auto;
		color: $main;
	}
	
	.input {
		padding: 0 3rem 0 3.5rem;
	}
}

/* Select line with icons */
.label_select.label_select_line_icon {
	&::after {
		right: .2rem;
	}
}

.select_after.label_select_line_icon {
	&::after {
		right: 0;
	}
}

.label_select_line_icon.label_input_line_icon {
	.icon {
		color: $inputIconColor;
	}
	
	.select_img_icon {
		left: auto;
		right: 0;
		color: $main;
	}
	
	.input_line {
		padding: 0 3rem 0 2.5rem;
	}
}