html - 使用 HTML+CSS 在输入上显示跨度

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

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

我如何在输入元素上显示 span 元素，以便用户知道无需输入 http://所以它看起来好像已经有一个值，但它是输入上的 span 元素？我想我可以用 CSS 定位来做到这一点。

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

最佳答案

正如您所提到的，您需要使用定位并将带有 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>

关于html - 使用 HTML+CSS 在输入上显示跨度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20653207/