Fork Me! FCC: Survey Form - Jewellery


I am having trouble with styling the form-control class.
Even though the dropdowns are given a class of form-control,
they don’t react as the upper half of the survey-form.

I have tried to style the #dropdown seperately but that didn’t
do the trick.

Something is missing or conflicting but I can’t figure out what.

Please, help :slight_smile:

Can you be a bit more specific? What are you trying to do, and what is not working?

I want the dropdowns (select an option) to look like the form-control fields: Name,email, age.

I have styled the .form-control but the dropdowns doesn’t react to this.

You’re right, to me it looks like it should be working how you would like it to be working. So I took a look at what the MDN (bookmark this, it’s an essential reference for web dev) select page said to see if it said anything that could help. I found this:

Styling with CSS

The <select> element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the box model, the displayed font, etc., and you can use the appearance property to remove the default system appearance .

However, these properties don’t produce a consistent result across browsers, and it is hard to do things like line different types of form element up with one another in a column. The <select> element’s internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets (such as jQuery UI), or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.

For more useful information on styling <select> , see:

So it seems like this is a particularity of the select element. I think you might have to style it separately from your other inputs.

Seems to require some more advanced solutions for styling.
I’ll probably save that till I have a bit more experience.

Thanks for your help and advice ( bookmarked! )