JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<form>
	<fieldset>
		<select>
			<option value="#F00" style="background-color: #F00">#F00</option>
			<option value="#0F0" style="background-color: #0F0">#0F0</option>
			<option value="#F0F" style="background-color: #F0F">#F0F</option>
		</select>
	</fieldset>
</form>

SCSS

html {
	font: 400 14px/1.5 -apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande", sans-serif;
	font-family: Menlo, Monaco, Andale Mono, Consolas, Lucida Console, monospace;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

select {
	display: block;
	font-family: inherit;
	font-size: inherit;
	-webkit-text-size-adjust: none;
	color: inherit;
	padding: 10px 10px 9px;
	width: 100%;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	margin: 0;
	border: none;
	border-radius: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: #FFF url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' fill='none'%3E%3Cpath fill='%23000' d='M7 12l7-12H0l7 12z'/%3E%3C/svg%3E") no-repeat calc(100% - 13px) 50%;
	background-size: 10px 8px;

	/* Hide arrow icon in IE browsers */
	&::-ms-expand {
		display: none;
	}

	/* Set options to normal weight */
	option {
		font-weight: normal;
		font-family: inherit;
	}
}