CODEWITHSUNDEEP
htmlcssinputposition
onlineracoon
onlineracoon

Reputation: 2970

css remove input text centering

I want to remove the default centering (vertical-align) on input fields, I have tried to use:

input[type="text} {
  vertical-align: top;
}

Basically, I am building a "textbox" component, which has a placeholder (and later icons etc.) take a look at the following code:

Css:

<div class="textbox">
    <div class="textbox-placeholder">Username or email</div>
    <input type="text" class="textbox-input" />
</div>

Html:

body {
    font: 400 16px/24px 'Lucida Grande', sans-serif;
}

.textbox {
    height: 50px;
    position: relative;
    background-color: #E1E1E1;
    border: 1px solid #CCCCCC;
}

.textbox-input {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

input[type="text"] {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    background: none transparent;
    font: inherit;
}

.textbox-input {
    z-index: 20;
}

.textbox-input {
    z-index: 10;
}

jsFiddle

Upvotes: 1

Views: 1382

Answers (1)

Godwin
Godwin

Reputation: 9937

Vertical align doesn't work on text input elements, it will always center vertically, so what you need to do is not set a defined height. In this case you are doing this by setting an explicit top and bottom, so remove line 17 or set bottom to auto instead of 0.

.textbox-input {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    /*bottom: 0;*/
    left: 0;
}

See the updated JS fiddle: http://jsfiddle.net/DTgty/2/

Keep in mind that the placeholder property is now accepted in most browsers so that might want to save yourself some time and use it instead (like I used it here: http://jsfiddle.net/DTgty/3/)

Upvotes: 2

Related Questions