Skip to content

Instantly share code, notes, and snippets.

@JRyven
Last active April 6, 2021 14:29
Show Gist options
  • Save JRyven/8b43443522449a1798bb14aa839599a2 to your computer and use it in GitHub Desktop.
Save JRyven/8b43443522449a1798bb14aa839599a2 to your computer and use it in GitHub Desktop.
Styled Selector with just CSS
// CSS
div.select {
position: relative;
display: block;
width: 100%;
margin-bottom: 1rem;
border: 1px solid lightgrey;
border-radius: 10px;
}
div.select select {
background: transparent;
color: #2e302d;
display: inline-block;
position: relative;
padding: 8px 30px 6px 10px;
border: 0;
border-radius: 0;
-webkit-appearance: none;
width: calc( 100% );
z-index: 1;
font-size: 16px;
margin-right: 0px !important;
line-height: 1em !important;
}
div.select:after {
content: '\25BC';
color: lightgrey;
background: transparent;
display: block;
position: absolute;
width: 30px;
height: calc( 100% - 22px );
top: 0px;
right: 0px;
padding: 10px 0px 0px 0px;
z-index: 0;
text-align: center;
font-size: 10px;
}
// HTML
<div class="style-select">
<select name="model" id="model">'.$select_html.'</select>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment