Skip to content

Instantly share code, notes, and snippets.

Last active November 4, 2017 11:51
What would you like to do?
Style Dropdown Select Menus in Chrome – Square Corners and Height -
/* Default theme form styles, similar to Genesis Sample */
textarea {
background-color: #fff;
border: 1px solid #ccc;
color: #545454;
font-size: 18px;
font-size: 1.8rem;
font-weight: 400;
padding: 12px 16px;
width: 100%;
/* Add for select with square corners and matching height */
select {
padding: 10px 16px; /* Firefox */
height: 50px; /* Chrome & Safari */
-webkit-border-radius: 0;
border: 0;
outline: 1px inset #fff;
outline-offset: -1px;
The padding can be adjusted for Firefox, if you see the text cut off.
Just make the top and bottom padding a few pixels smaller than the default styles.
Next is the height declaration; adjust this so the select field matched the height of the other input fields.
The last four lines are what makes the corners square; #fff is the background color in the default CSS.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment