html - 自定义 CSS 输入字段问题

Question

为什么我的光标在这个例子中从右上角开始？

看到当我在字段内单击时，它位于右上角，然后当我键入时它移动到中心。有什么想法吗？

http://jsfiddle.net/2Ltm5adw/

HTML:

<label class="input">
    <span>Email address</span>
    <input type="text" />
</label>

CSS:

input, select, textarea {
    line-height:50px;
    width:100%;
    padding-left:20px;
    display: block;
}

.input span {
  position: absolute;
  z-index: 1;
  cursor: text;
  pointer-events: none;
  color: #999;
  /* Input padding + input border */
  padding: 7px;
  /* Firefox does not respond well to different line heights. Use padding instead. */
  line-height: 50px;
  /* This gives a little gap between the cursor and the label */
  margin-left: 2px;
}

.input input, .input textarea, .input select {
  z-index: 0;
  padding: 6px;
  margin: 0;
  font: inherit;
  line-height: 50px;
}

Answer 1

因为 line-height。将其替换为 height:

input,
select,
textarea {
  border: 2px solid $gray-lighter;
  border-bottom: 1px solid $gray-lighter;
  border-top: 1px solid $gray-lighter;
  height: 50px;
  /*replace with height*/
  width: 100%;
  padding-left: 20px;
  background: $white;
  display: block;
}
.input span {
  position: absolute;
  z-index: 1;
  cursor: text;
  pointer-events: none;
  color: #999;
  /* Input padding + input border */
  padding: 7px;
  /* Firefox does not respond well to different line heights. Use padding instead. */
  line-height: 50px;
  /* This gives a little gap between the cursor and the label */
  margin-left: 2px;
}
.input input,
.input textarea,
.input select {
  z-index: 0;
  padding: 6px;
  margin: 0;
  font: inherit;
  height: 50px;
  /*replace height*/
}

<label class="input">
  <span>Email address</span>
  <input type="text" />
</label>