Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Curt Bradford
Curt Bradford
9,139 Points
Posted by Curt Bradford
Curt Bradford
9,139 Points

Adding padding to select input.

I am able to format the select input with font-size, but am unable to add padding. Is there a way to add padding to the select input? Please see the html and CSS below.

Font-size is applied properly, but padding is not added.

CSS

select { font-size: 1.3em; padding: 10px; }

HTML

<label for="state">State</label> <select id="state"> <optgroup label="state" name="user_state"> <option value="default">Choose State</option> <option value="California">CA</option> <option value="Florida">FL</option> <option value="Hawaii">HI</option> <option value="Indiana">IN</option> <option value="New Mexico">NM</option> <option value="Texas">TX</option> <option value="Virginia">VA</option> <option value="Wyoming">WY</option> </optgroup> </select>

1 Answer

Liliana Brissos
Liliana Brissos
7,686 Points
Liliana Brissos
Liliana Brissos
7,686 Points

Hi Curt,

You can style the Select element once you override the browser's default styling by using the vendor prefixes to set the appearance to none.

I've created an example for you here: http://codepen.io/lilianab/pen/xOvyKO

Hope that helps!

Curt Bradford
Curt Bradford
9,139 Points
Curt Bradford
Curt Bradford
9,139 Points

Thanks, Liliana! This helps a lot! I'll definitely take this approach going forward.