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!

As a matter of fact, you have a typo in your CSS: the last char of the rule for input type button is `)`, but must be `}`. — Nicolás Ozimica, Nov 12 '11 at 02:16

score 1 · Answer 1 · edited May 23 '17 at 10:24

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

edited May 23 '17 at 10:24

Community

1
1

answered Nov 12 '11 at 02:13

Nicolás Ozimica

9,481
5
38
51

score 1 · Answer 2 · answered Nov 12 '11 at 02:14

1

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.

answered Nov 12 '11 at 02:14

Niels

48,601
4
62
81

score 0 · Answer 3 · answered Feb 18 '14 at 11:04

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 */

score 0 · Answer 4 · answered Feb 11 '15 at 20:03

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">

score 0 · Answer 5 · answered Nov 12 '11 at 02:12

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

score 0 · Answer 6 · answered Nov 12 '11 at 02:12

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">

score 0 · Answer 7 · answered Nov 12 '11 at 02:14

0

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

answered Nov 12 '11 at 02:14

score 0 · Answer 8 · answered Nov 12 '11 at 02:36

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 ..

CSS on input boxes

8 Answers8