Style Dropdown Select Menus in Chrome – Square Corners and Height

Have you noticed lately that when you view dropdown select menus with Chrome or Safari browsers that they are very narrow in height and also have rounded corners? This happens, if you’re using a forms plugin or the WordPress Archives or Categories widgets with the dropdown option. They all look like the image below – rounded corners and narrow in height, compared to Firefox, even though they have the same CSS styles as the other input fields.

Small, round corner select dropdown menus just seem out of place when the rest of your form inputs are a nicer size (mobile-friendly size for touch screens) and have square corners too.

This tutorial helps you style dropdown select menus in Chrome for square corners and height to match other form input fields. I’m using the Genesis Sample theme, but the fix will also work for any WordPress theme.

Default Styles for Form Input Fields

The default styles from style.css for the Genesis Sample theme for the input fields, including select fields, are below.

input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	color: #333;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 300;
	padding: 16px;
	width: 100%;
}

For my examples, I’ve changed the padding line to be padding: 12px 16px;, and changed the colors because I’m currently working on a custom theme for a client.

input,
select,
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%;
}

Fixing the Height

If you added rounded corners to your other form input fields, you just need to fix the height of the select drop downs. Note that changing the padding sizes doesn’t seem to affect the height at all.

My preference is to add a height to the select. You will need to adjust your height to match your other form fields. For my example, 50px works well. Add this to your theme style.css, just below the default form field styles above.

select {
	height: 50px;  /* Chrome & Safari height */
}

Another option is to add -webkit-appearance: none;, without the height declaration, but the downside is that it will also remove the arrows on the drop down.

Remove Round Corners or Add Square Corners

Making the corners square is a bit of a hack, but I haven’t found anything that works better. This is the complete CSS that you can use to add height and square corners. Add this to style.css, just below the default styles above for input, select, textarea.

select {
	padding: 10px 16px; /* Firefox */

	height: 50px;  /* Chrome & Safari */
	-webkit-border-radius: 0;
	border: 0;
	outline: 1px inset #fff;
	outline-offset: -1px;
}

Explanation of the CSS

• 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.

And these are before and after images, so you can compare the difference a few lines of code make. The Firefox before and after is in the first image.

A gist with the CSS is here. You can also read another tutorial, if you need to adjust the position or size of radio buttons and check boxes in Genesis themes.