Question

I have a page with a log in form on the right and email request form on the left. Each one a has a drop down that look very different from the other. For some reason styles are over writing one another. If I change the second form it changes the style on the first, what am I doing wrong?

#left .home-form-left input, select{height:26px; line-height:26px; border:1px solid #999999; color:#666666; font-size:12px;}



.sq-question input, select, option{width:195px; margin-bottom:5px;}

Answer 1

This is happening because the second select is overwriting the first.

To fix this, you need to be more specific, like this

#left .home-form-left input, #left .home-form-left select {/*styles*/}

.sq-question input, .sq-question select, .sq-question option {/*styles*/}

When you just place the select there, without anything in front of it, you are saying style all selects this way

In my examples above, I directly referencing the location of each element that I want to style, separating with commas as necessary.