Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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!

share|improve this question
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 Nov 12 '11 at 2:16
add comment (requires an account with 50 reputation)

6 Answers

up vote 0 down vote

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;
}
share|improve this answer
add comment (requires an account with 50 reputation)
up vote 0 down vote

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">
share|improve this answer
add comment (requires an account with 50 reputation)
up vote 0 down vote

What you need to research is css selectors: CSS selector for form input text 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;
}
share|improve this answer
add comment (requires an account with 50 reputation)
up vote 0 down vote

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.

share|improve this answer
add comment (requires an account with 50 reputation)
up vote 0 down vote

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

share|improve this answer
add comment (requires an account with 50 reputation)
up vote 0 down vote

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

share|improve this answer
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.