Custom Select

index.html

<div class="container">
	<form class="form">
		<div class="input-wrap">
			<label class="visually-hide" for="team-select">Choose a career</label>

			<!-- Select Icon (Could also be an SVG) -->
			<div class="input-wrap__icon input-wrap__icon--select"></div>

			<select name="jobs" id="team-select" required aria-required="true">

				<option value="">TEAM</option>

				<option value="administration">Administration</option>

				<option value="duke-cancer-institute">Duke Cancer Institute</option>

				<!-- Remaining Options -->

			</select>
		</div>
		<div class="input-wrap">
			<label class="visually-hide" for="search-input">Search</label>
			<input type="search" id="search-input" placeholder="Search">
			<svg class="input-wrap__icon input-wrap__icon--search" xmlns="http://www.w3.org/2000/svg" width="15" height="14" fill="none" aria-hidden="true">
				<path fill="#00539B" d="M6.362 9.666c1.065 0 1.968-.371 2.709-1.114.74-.743 1.111-1.645 1.111-2.707 0-1.061-.371-1.962-1.114-2.703C8.325 2.4 7.423 2.03 6.36 2.03 5.3 2.03 4.396 2.4 3.65 3.144c-.747.743-1.12 1.646-1.12 2.707s.373 1.963 1.118 2.704c.745.74 1.65 1.111 2.714 1.111Zm.002 2.03c-1.637 0-3.023-.566-4.16-1.7C1.068 8.865.5 7.482.5 5.849c0-1.632.568-3.015 1.704-4.148C3.341.567 4.727 0 6.364 0c1.633 0 3.016.567 4.149 1.7s1.7 2.515 1.7 4.148a5.79 5.79 0 0 1-.275 1.799 5.76 5.76 0 0 1-.789 1.568l3.351 3.351L13.082 14l-3.367-3.367a6.257 6.257 0 0 1-1.563.781 5.575 5.575 0 0 1-1.788.282Z" />
			</svg>
		</div>
	</form>
</div>

styles.scss

:root {
	--white: #fff;
	--blue: #001e6b;
	--gray: #e2e6ed;
}

body {
	background-color: var(--gray);
}

input,
select {
	width: 100%;
	padding: 15px 20px;
	margin: 0;
	color: var(--blue);
	background-color: var(--white);
	font-family: inherit;
	font-size: inherit;
	border: 1px solid var(--white);
	border-radius: 0;
	box-shadow: none;
	appearance: none;

	&:focus {
		outline: 1px solid var(--blue);
		outline-offset: 1px;
	}

	&::placeholder {
		color: var(--blue);
		opacity: 1;
		text-transform: uppercase;
	}
}

.visually-hide {
	position: absolute;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.container {
	max-width: calc(100% - 40px);
	padding: 40px 0;
	margin: auto;
}

.form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.input-wrap {
	position: relative;
	background: var(--white);

	&__icon {
		position: absolute;
		right: 25px;
		pointer-events: none;

		&--select {
			top: calc(50% - 4px);
			padding: 4px;
			border: solid var(--blue);
			border-width: 0 2px 2px 0;
			transform: rotate(45deg) translateY(-50%);
		}

		&--search {
			top: 50%;
			transform: translateY(-50%);
		}
	}
}