CODEWITHSUNDEEP
htmlcss
clankill3r
clankill3r

Reputation: 9543

styling text vs styling an button

If i style input then the height affects a text input different then a button. Why is this? And what can be done about it? (and as a extra, why don't they align?)

enter image description here

<input type="text" value="foobar"/>
<input type="button" value="foobar"/>

css:

body {
    background: red;
}

input {
    border: 0;
    height: 20px;
    padding: 10px;
}

http://jsfiddle.net/clankill3r/sxbzav34/

Upvotes: 1

Views: 76

Answers (6)

Alex Char
Alex Char

Reputation: 33218

One solution is to set line-height instead of height:

body {
    background: red;
}
input {
    border: 0;
    line-height: 50px;
    padding: 0 10px 0 10px;
    height: 50px;
}
<input type="text" value="foobar"/>
<input type="button" value="foobar"/>

Fix: After testing on other browsers discover an issue. You have to use specific padding e.g. padding: 0 10px;(top and bottom have to be 0)

Upvotes: 2

Guffa
Guffa

Reputation: 700232

The size differs because the vertical padding is not added to the size of the button, but it is added to the size of the textbox. You can use height and line-height to set the height and vertical position of the text.

The alignment is off because they have different vertical alignment by default. If you specify a vertical alignment they will align themselves equally.

input {
    vertical-align: bottom;
    border: 0;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}

Demo: http://jsfiddle.net/Guffa/kx7wzufr/

Upvotes: 1

Michal Hosala
Michal Hosala

Reputation: 5697

Some of html elements such as input of type button has predefined styles in browsers. Among others, this results into input of type button to have box-sizing: border-box. Enforce this to be box-sizing: content-box, so your css will look like:

body {
    background: red;
}

input {
    border: 0;
    height: 20px;
    padding: 10px;
    box-sizing: content-box;
}

Upvotes: 2

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

Each browser gives inputs special styling. If you take a look at Chrome developer tools and scroll down a little bit you'll see something along the lines of below. You have to overwrite those styles by adding a class or using input[type="button"]:

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
}

Upvotes: 0

Fahad Hasan
Fahad Hasan

Reputation: 10506

You can assign two different classes to your text input field and the input button and then style them accordingly, please check this: DEMO.

HTML:

<input class="text" type="text" value="foobar" />
<input class="button" type="button" value="foobar" />

CSS:

body {
    background: red;
}
.text {
    border: 0;
    height: 20px;
    padding: 10px;
}
.button {
    border: 0px;
    padding: 12px 12px 13px 12px;
}

Upvotes: 0

Toneek Muz
Toneek Muz

Reputation: 11

Because of default styling of browsers. Give them different classes and style them.

Upvotes: 0

Related Questions