Display span over input with HTML+CSS

Question

I want to display a span element over an input element with CSS. How can I do this. My current code:

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

How can I display the span element on the input element so that the users know there is no need to enter http:// so it would look like if there's already a value in but then it is the span element on the input? I assume I can do that with CSS positioning.

I cannot use placeholder as I don't want it to be removed.

Answer 1

As you have mentioned you need to use positioning and wrap your input with span into div or some other element.

.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