Question

我想用CSS在输入元素上显示span元素。我怎样才能做到这一点。我目前的代码：

<input type="url" placeholder="e.g. www.google.com" />
<span>http://</span>

如何在输入元素上显示span元素，以便用户知道不需要输入http：//所以如果已经有值，那么它就像输入中的span元素一样？我假设我可以通过CSS定位来做到这一点。

我不能使用占位符，因为我不希望它被删除。

Answer 1

正如您所提到的，您需要使用定位并将输入用span包装到div或其他元素中。

.wrapper {
    position: relative;
}

input {
    padding-left: 48px;
}

.wrapper span {
    position: absolute;
    left: 2px;
}

<div class="wrapper">
    <input type="url" placeholder="e.g. www.google.com" />
    <span>http://</span>    
</div>

Example

Answer 2

这是一个旧帖子，但有一种更简单的方法可以做到这一点并且不使用定位。将表单的每个元素包装在列表项中，并将显示设置为＆＃39; inline-block＆＃39;并显示跨度到＆＃39;阻止＆＃39;像这样 -

li{
   display: inline-block;
}

li span{
   display: block;
}

然后您需要交换html元素的顺序，如此 -

<span>http://</span>
<input type="url" placeholder="e.g. www.google.com" />

如果您希望跨度显示在输入元素的底部，则可以保持不变。

Answer 3

类似这样的事：fiddle

* {
    font-family: Arial, sans-serif;
    font-size: 12px;
}
.row {
    position:relative;
}
.row span {
    position:absolute;
    left:5px;
    top:5px;
}
.row input {
    padding-left: 40px;
    line-height: 16px;
}

<div class="row">
    <span>http://</span>
    <input type="url" placeholder="e.g. www.google.com" />
</div>

使用HTML + CSS显示输入的跨度

3 个答案: