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
– Nicolás Ozimica, Commented Nov 12, 2011 at 2:16

Community · Accepted Answer · 2017-05-23 10:24:16Z

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, 2017 at 10:24

CommunityBot

11 silver badge

answered Nov 12, 2011 at 2:13

Nicolás Ozimica

9,7985 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niels · Accepted Answer · 2011-11-12 02:14:08Z

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, 2011 at 2:14

Niels

50.1k4 gold badges68 silver badges86 bronze badges

Comments

Bojangles · Accepted Answer · 2011-11-12 02:12:28Z

0

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

answered Nov 12, 2011 at 2:12

Bojangles

102k50 gold badges175 silver badges209 bronze badges

Comments

Doozer Blake · Accepted Answer · 2011-11-12 02:12:44Z

0

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

answered Nov 12, 2011 at 2:12

Doozer Blake

7,7984 gold badges31 silver badges41 bronze badges

Comments

user866503 · Accepted Answer · 2011-11-12 02:14:14Z

0

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

answered Nov 12, 2011 at 2:14

user866503

Comments

Jason Gennaro · Accepted Answer · 2011-11-12 02:36:45Z

0

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

answered Nov 12, 2011 at 2:36

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Comments

procma · Accepted Answer · 2014-02-18 11:04:14Z

0

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

answered Feb 18, 2014 at 11:04

procma

1,4903 gold badges17 silver badges24 bronze badges

Comments

v.orujov · Accepted Answer · 2015-02-11 20:03:36Z

0

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

answered Feb 11, 2015 at 20:03

v.orujov

561 silver badge5 bronze badges

Collectives™ on Stack Overflow

CSS on input boxes

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related