Manipulating html input forms with CSS?

Question

So currently I'm trying to edit the general layout and look of html input forms. Heres a snippet of my code for my html input forms:

<p> <form action='register.php' method="POST"></p>
<p>First Name: <input type="text" name="firstName" />Last Name: <input type="text"     name="lastName"/></p>
<p>Address: <input type="text" name="address" /></p>
<p>City: <input type="text" name="city" /></p>

And the css that edits this is:

#Address, #emailAddress, #password, #confirmPassword, #firstName, #lastName{
width:50%;
outline: double 1px #FFA500;  
height:16px; 
padding:10px;  
}

Problem is, nothing changes with this code. Shouldn't this change my html input forms?

peacemaker · Accepted Answer · 2012-07-12 17:16:22Z

2

Try using the id attribute instead of the name attribute on your html.

<input type="text" id="firstName" />

answered Jul 12, 2012 at 17:16

peacemaker

2,5914 gold badges28 silver badges49 bronze badges

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

Comments

Wex · Accepted Answer · 2012-07-12 17:18:28Z

2

It'd be much better to define a style for all of your input elements at once:

input { 
    width: 50%;
    outline: double 1px #FFA500;  
    height: 16px; 
    padding: 10px; }

You should read up on CSS selectors.

answered Jul 12, 2012 at 17:18

Wex

15.7k10 gold badges68 silver badges108 bronze badges

2 Comments

mike Over a year ago

Thanks. This is good but I have custom parameters for each (they are all going to look different a little bit)

Wex Over a year ago

Still, it makes sense to define a base-style if you're sharing styles. As others have said, if you're looking for greater specificity look into using id or class attributes.

Liggy · Accepted Answer · 2012-07-12 17:23:18Z

2

Here are some quick observations:

improper nesting of elements. Example, opened form tag within paragraph tag. Also, form tag isn't closed
use "id" attribute instead of "name"
be sure that #Address matches the input id (currently, it doesn't)
city input id isn't reflected in the CSS

answered Jul 12, 2012 at 17:23

Liggy

1,2012 gold badges12 silver badges19 bronze badges

Comments

jzacharia · Accepted Answer · 2012-07-12 17:18:22Z

0

You need to assign an ID or class to the input.

Remember, with CSS;

ID = #object
Class = .object

<p>First Name: <input type="text" name="firstName" id="firstName" />

answered Jul 12, 2012 at 17:18

jzacharia

5121 gold badge3 silver badges15 bronze badges

2 Comments

mike Over a year ago

I knew i was missing something! Thanks a lot!

jzacharia Over a year ago

Also, as @Wex mentioned, it'll save you time by defining a style for all of your input elements at the same time with one selector. Take a look at the code he posted.

Collectives™ on Stack Overflow

Manipulating html input forms with CSS?

4 Answers 4

Comments

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related