CSS on input boxes - css

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;
}

Answer 2

There is an option you can add
For your text fields
#form input[type=text] {}
For your password fields
#form input[type=password] {}
For your button fields
#form input[type=button] {}
Or just add a class to your password field, which is password.

Answer 3

Use the type of the input as part of your selector:
#form input[type="text"] {
border: 1px solid #FFFFFF;
font-size: 16px;
padding: 5px;
width: 200px;
}
This is the attribute selector.
You could always just add a class for your input boxes:
<input type="text" class="styled" name="email" id="email">
<input type="password" value="" class="styled" name="password" id="password">
With:
#form input.styled {
border: 1px solid #FFFFFF;
font-size: 16px;
padding: 5px;
width: 200px;
}

Answer 4

You're missing the .password and .button classes on your html.
<input type="text" class="text" name="email" id="email">
<input type="password" class="password" value="" name="password" id="password">
<input name="button" class="button" type="image" src="go.jpg" alt="Submit" align="right">

Answer 5

You didn't put a class on your inputs? .passwords means class="password" in your html

Answer 6

You could do this
Do not style the input element on its own, but instead target only those elements you want.
First, get rid of this css
#form input {/* styles here*/}
Then do this
#form input.text, #form input#password{
border: 1px solid #FFFFFF;
font-size: 16px;
padding: 5px;
width: 200px;
}
The comma separates the two elements but applies the css to each.
Then you don't need to "reset" the border on the image submit button.
By the way, your password input has an id according to your code and not a class, so you need the # instead of the ..

Answer 7

FORM "inputs" in CSS:
Text input:
input[type="text"] {...} /* normal (one row) text input */
textarea {...} /* multiline text input */
input[type="password"] {...} /* password masked input */
Button:
input[type="button"] {...}
input[type="submit"] {...} /* type of button - submitting the form */
input[type="reset"] {...} /* clean (reset) whole form "inputs" */
Checkbox:
input[type="checkbox"] {...}
Radiogroup:
input[type="radio"] {...}
Dropdown list:
select {...}
select optgroup{...} /* group od values in dropdown list */
select option{...} /* value to choose in dropdown list */

Answer 8

just remove second line on your css and add "text" class to your password type input. CORRECT VERSION BELOW:
CSS:
#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)
HTML:
<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">