CSS forms - input width not working

Question

The following css:

#contactform {
    width: 400px;
    height: 215px;
}

.webform {
}

.webform input .name {
    width: 50px;
}

.webform input .email {
    width: 70px;
}

.webform input .comments {
    width: 200px;
}

when used in html as

    <div id="contactform">
        <div class="webform">
            <input class="name" name="Name" type="text" id="senderName" placeholder="Enter your name here">
            <input class="email" name="Email" type="text" id="senderEmail" placeholder="Enter a valid email adress here">
            <br>
            <input class="comments" name="Comments" type="text" id="senderComments" placeholder="Comments...">
        </div>
    </div>

produces all three input field of the same width (50px = that is, the width of the webform input). I'm not sure what I'm doing wrong. Help?

albert · Accepted Answer · 2016-03-25 02:24:12Z

9

your classes are on your inputs, not on child elements of the inputs. so change input .name, etc., to input.name or just .name, repeat for all three. :)

edited Mar 25, 2016 at 2:24

answered Jun 23, 2012 at 18:51

albert

8,1013 gold badges49 silver badges64 bronze badges

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

1 Comment

jkcl Over a year ago

Thank you for the succinct explanation!

Umesh Aawte · Accepted Answer · 2012-06-23 19:05:42Z

5

remove the whitespace between your input and class name

.webform input.name {
    width: 50px;
}

.webform input.email {
    width: 70px;
}

.webform input.comments {
    width: 200px;
}

Try this fiddle

edited Jun 23, 2012 at 19:05

Umesh Aawte

4,7007 gold badges44 silver badges52 bronze badges

answered Jun 23, 2012 at 18:51

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

2 Comments

jkcl Over a year ago

Thank you... when you know something, it doesn't take long!

jkcl Over a year ago

@UmeshA Thanks for the fiddle link.

Collectives™ on Stack Overflow

CSS forms - input width not working

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related