html - css 入力テキストのセンタリングを削除

Question

入力フィールドのデフォルトのセンタリング (vertical-align) を削除したいので、使用しようとしました:

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

基本的に、プレースホルダー（および後のアイコンなど）を持つ「テキストボックス」コンポーネントを作成しています。次のコードを見てください。

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;
}

jsフィドル