Styling Forms with CSS

Question

I am trying to style a form on a website I am designing with CSS. I have tried to adjust the width of the labels and it doesn't change it. Here is my code:

<h3>Contact Form</h3>
<div>
    <label for="form1_name">Name</label>
    <input id="form1_name" name="name" type="text" required="required" />

</div>

<div>
    <label for="form1_email">Email</label>
    <input id="form1_email" name="email" type="email" placeholder="[email protected]" required="required" />


</div>

<div>
    <label for="form1_email">Telephone</label>
    <input id="form1_telephone" name="telephone" type="text" />
    </div>


<div>
    <label for="form1_message">Comment</label>
    <textarea id="form1_message" name="message" cols="30" rows="4" required="required"></textarea>

</div>

<div>
    <input id="form1_submit" name="submit" value="Send" type="submit" /><input type="hidden" name="cms-form" value="Y29udGFjdDpwZXJjaF9mb3JtczovdGVtcGxhdGVzL2NvbnRlbnQvY29udGFjdC5odG1s" />
</div>


</form></div>

Here is my css: #contact label { width:200px !important; }

Yet this doesn't change the width of my labels. What am I doing wrong? Here is a link to the page: http://ridgesideredangus.com/about.php

I do not see an element with ID contact in your code. Do you? — PointedEars
– PointedEars, Commented Feb 5, 2013 at 3:10
Please select an answer if you've found one to be correct or helpful. — isherwood
– isherwood, Commented Feb 12, 2013 at 18:23

isherwood · Accepted Answer · 2013-02-05 03:07:35Z

4

#contact label {display: inline-block; width: 200px;}

Labels are inline elements by default. You cannot add dimensions unless you set them to block or inline-block.

answered Feb 5, 2013 at 3:07

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

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

Comments

Jon P · Accepted Answer · 2013-02-05 03:29:22Z

0

As an alternate, ditch the divs altogether. Make your labels blocks and nest the form elements in them. Set the labels to position relative so you can position the form elements in relation to them.

HTML

<label >Name<input id="form1_name" name="name" type="text" required="required" /></label>

<label >Email<input id="form1_email" name="email" type="email" placeholder="[email protected]" required="required" /></label>

<label >Telephone<input id="form1_telephone" name="telephone" type="text" /></label>

CSS

label {display:block;position:relative;padding:5px;}
label input {position:absolute; left:100px;}

Example

HOWEVER some argue it is preferable to explicitly relate the label to the input

answered Feb 5, 2013 at 3:29

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

Collectives™ on Stack Overflow

Styling Forms with CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related