This is simplier than writing a custom dropdown list.

This code is compatible with all browsers including IE, but the formatting looks best on Chrome and Firefox.

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Custom Style SELECT/OPTION Lists</title>

		body {
			background-color: silver;
		.select select,
		.select option {
			border: none;
			outline: none;
			font-size: 25px;
			padding: 25px 75px 25px 25px;
			background-color: slategray;
			color: white;
			-webkit-appearance: none; /* for Safari */
		.select {
			position: relative;
			display: inline-block;
		.select .arrow {
			position: absolute;
			height: 100%;
			width: 50px;
			top: 0;
			right: 0;
			background-color: dimgray;
			pointer-events: none;
		.select .arrow::before,
		.select .arrow::after {
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			border-style: solid;
			left: 9px;
		.select .arrow::before {
			border-color: transparent transparent gray transparent;
			border-width: 0 16px 16px 16px;
			top: 25%;
		.select .arrow::after {
			border-color: gray transparent transparent transparent;
			border-width: 16px 16px 0 16px;
			bottom: 25%;


	<div class="select">
			<option value="">Lorem.</option>
			<option value="">Sequi.</option>
			<option value="">Praesentium!</option>
			<option value="">Debitis.</option>
			<option value="">Sequi.</option>
			<option value="">Praesentium!</option>
			<option value="">Debitis.</option>
		<div class="arrow"></div>


Coding Video