CODEWITHSUNDEEP
cssformsfield
Geo Man
Geo Man

Reputation: 31

CSS on input boxes

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!

Upvotes: 3

Views: 28078

Answers (8)

v.orujov
v.orujov

Reputation: 56

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

Upvotes: 0

procma
procma

Reputation: 1440

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

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

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

Upvotes: 0

user866503
user866503

Reputation:

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

Upvotes: 0

Niels
Niels

Reputation: 49919

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.

Upvotes: 1

Nicol&#225;s Ozimica
Nicol&#225;s Ozimica

Reputation: 9738

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

Upvotes: 1

Doozer Blake
Doozer Blake

Reputation: 7797

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

Upvotes: 0

Bojangles
Bojangles

Reputation: 101483

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

Upvotes: 0

Related Questions