Question

为什么我的光标在此示例中从右上角开始？

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

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>

Answer 2

Demo

这是因为线高。尝试高度而不是line-height.It工作正常

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

Answer 3

只需从输入中删除line-height，然后将其替换为padding: 20px 7px;

＆＃13;

.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;
  padding: 20px 7px;
}

＆＃13;

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

＆＃13;

Answer 4

以下是您更新的JSFiddle Link，请查看您的问题是否已解决!!

所做的更改：

.input span {
  padding: 20px;
  line-height: 25px;
}
.input input, .input textarea, .input select {
  padding: 20px;
  height: 25px;
}

Answer 5

这有什么不对吗？节省捣蛋

<label for="emailID">Email Address : </label>
    
    <input type="email" id="emailID" placeholder="Your Email Address"/>

并且可以设置。

#emailID {width:300px;background-color:green;color:white;border-radius:5px;}

 <label for="emailID">Email Address : </label>
        
        <input type="email" id="emailID" placeholder="Your Email Address"/>

自定义CSS输入字段问题

5 个答案: