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
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsFormatting an option form
Hello,
I am wanting to style my option form like my other forms, but I am not having much luck. I can get the outside to expand to the style I want by adding a <div> but it is the selection form I want to look the same. Is anyone able to show me how to do this?
HTML
<select id="state" name="user_state">
<option value="Choose-state">Choose State</option>
<option value="Mississippi">Mississippi</option>
<option value="Washington">Washington</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Texas">Texas</option>
<option value="Virgina">Virgina</option>
</select>
CSS I want it to be like:
input[type=text], input[type=email], { width: 100%; padding: 12px 20px; margin: 8px 0; border: 2px solid #339966; border-radius: 5px; }
Thank you for your time.
2 Answers
Christian Lawrence
3,941 PointsBe aware that forms elements are difficult to style and often require some hacking.
Try this:
select { width: 100%; padding: 12px 20px; margin: 8px 0; border: 2px solid #339966; border-radius: 5px; }
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsThank you