Hello,
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 
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 theappearanceproperty to remove the default systemappearance.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! )