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

HTML HTML Forms Choosing Options Select Menus

Posted by Allison Chefec
Allison Chefec
2,781 Points

Why do you need to define a height for the select menu? Looks like the padding declaration doesn't affect it either.

I want to add more padding to the select menu, specifically on the left side. In the workspace code there is this code:

padding: 6px; height: 32px;

I see the height value affects the height of the menu. Why do you have to add that though? Why can't you just add padding? Also playing around with the padding doesn't seem to work. It only seems to work if you adjust the height.

4 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

You don't need to define a height or padding, but in most cases it will look better with some styling. Both padding and height should affect a select element, though. Are you sure you're using:

select {
 padding: 6px;
 height: 32px;
}

and not

.select {
 padding: 6px;
 height: 32px;
}
Allison Chefec
Allison Chefec
2,781 Points
Allison Chefec
Allison Chefec
2,781 Points

Yea, i am using select, not .select.

Allison Chefec
Allison Chefec
2,781 Points
Allison Chefec
Allison Chefec
2,781 Points

I think it has something to do with this?

-webkit-appearance: none;
-webkit-border-radius: 0px;

After adding that to "select" it removes the default styling, and then padding works.

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

That's really strange. As pointed out in the MDN article, -webkit-appearance is a non-standard declaration, but only removes the default styling. Even without that, other styles to select elements should work, as you can see here in this codepen.

Maybe some other CSS is interfering? If you post the rest of the code, it might help to debug.