为什么我的光标在这个例子中从右上角开始?
看到当我在字段内单击时,它位于右上角,然后当我键入时它移动到中心。有什么想法吗?
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;
}
最佳答案
因为 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>
关于html - 自定义 CSS 输入字段问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27016736/