Display input range using HTML + CSS

Question

I want to show a span element above an input element using CSS. How can i do this. My current code is:

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

How can I display a span element on an input element so that users know that there is no need to enter http: // so that it looks if there is already a value, but then it is an input span element? I assume I can do this with CSS positioning.

I cannot use the placeholder as I do not want to be deleted.

Answer 1

As you already mentioned, you need to use positioning and wrap your input with a span in a 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="eg www.google.com" /> <span>http://</span> </div> 

Example

Answer 2

This is a little old post, but there is an easier way to do this without using positioning. Wrap each form element in a list element and set the display to "inline block" and the range display to "block" like this -

 li{ display: inline-block; } li span{ display: block; } 

Then you will need to change the order of the html elements like this:

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

However, you can leave it the same if you want the range to appear at the bottom of the input element.

Answer 3

something like this: 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="eg www.google.com" /> </div>