CSS on input boxes

Question

I have an issue on styling different form fields with CSS

I have a CSS code:

#form input {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}

Now this code styles all three of the Input fields I have (below) but also styles the image submit button I have

<input type="text" class="text" name="email" id="email">
<input type="password" value="" name="password" id="password">
<input name="button" type="image" src="go.jpg" alt="Submit" align="right">

So then I change the CSS and create:

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

This prevents the CSS styling of the image submit button but now it is not styling the password field - so I tried:

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.password {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

But this had no affect.

So the question is, how can I effectively allow the CSS styling on the input text and input password fields - but not to style the image submit button?

Thanks in advance!

Answer 1

What you need to research is css selectors: CSS selector for text input fields?.

#form input[type="text"] {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;width: 200px;
}
#form input[type="password"] {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}
#form input[type="button"] {
    border: 0px;
}