CSS - Same class, but different lengths for textbox / dropdown box?

Question

I am using the same style for my dropdown box, and a textbox, which is working fine, except that they are different lengths, only by ~10px

http://jsfiddle.net/PkWVg/

Wrong length

I can't seem to get them the same length without using seperate classes for each. It actually seems that the dropdown icon at the end is suppose to be to the right more?

CSS:

#container {
    width:500px;
}
.form-textbox, .form-dropdown {
    border: 0;
    outline: 0;
    height: 20px;
    width:100%;
    padding-left: 10px;
    background-color: rgb(204, 204, 204);
    color: #666;
}

HTML:

<div id="container">
    <select class="form-dropdown " name="turnover" />
    <option value="1">Less than £49,999 per year</option>
    <option value="2">£50,000 - £99,999 per year</option>
    <option value="3">£100,000 - £249,999 per year</option>
    <option value="4">£250,000 - £499,999 per year</option>
    <option value="5">£500,000 - £999,999 per year</option>
    <option value="6">£1,000,000 or more per year</option>
    </select>
    <br>
    <p>
        <input class="form-textbox ofTextbox" name="market" type="text" />
    </p>
</div>

take a look here: stackoverflow.com/questions/895904/…

Isma Topius
– Isma Topius

2013-12-30 15:36:36 +00:00
Commented Dec 30, 2013 at 15:36 — Isma Topius
– Isma Topius, Commented Dec 30, 2013 at 15:36

Dhaval Marthak · Accepted Answer · 2013-12-30 15:37:19Z

2

Apply box-sizing

.form-textbox, .form-dropdown{
    border: 0;
    outline: 0;
    height: 20px;
    width:100%;
    padding-left: 10px;
    background-color: rgb(204, 204, 204);
    color: #666;
   -moz-box-sizing: border-box; // Added rule
   -webkit-box-sizing: border-box; // Added rule
    box-sizing:border-box; // Added rule
}

Fiddle

answered Dec 30, 2013 at 15:37

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

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

3 Comments

Dhaval Marthak Over a year ago

I can see in my fiddle!

MRC Over a year ago

Appears that it depends on the browser. -moz-box-sizing:border-box; worked.

Dhaval Marthak Over a year ago

Yes For mozila it's -moz-box-sizing and for webkit browsers like safari and chrome it's -webkit-box-sizing :)

MRC · Accepted Answer · 2013-12-30 15:47:22Z

1

Add this:

-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

edited Dec 30, 2013 at 15:47

MRC

5533 gold badges10 silver badges32 bronze badges

answered Dec 30, 2013 at 15:37

Cthulhu

1,3711 gold badge13 silver badges26 bronze badges

Comments

mmilleruva · Accepted Answer · 2013-12-30 15:40:14Z

0

The padding-left:10px appears to be the problem. If you remove that, the fields are the same length.

answered Dec 30, 2013 at 15:40

mmilleruva

2,17818 silver badges20 bronze badges

1 Comment

MRC Over a year ago

The padding is needed to position the text.

Collectives™ on Stack Overflow

CSS - Same class, but different lengths for textbox / dropdown box?

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related