Skip to content

Instantly share code, notes, and snippets.



Last active Nov 4, 2017
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
You can’t perform that action at this time.