使用HTML + CSS在輸入上顯示跨度

我想用CSS在輸入元素上顯示span元素。我怎樣才能做到這一點。我當前的代碼：使用HTML + CSS在輸入上顯示跨度

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

我怎樣才能在輸入元素上顯示span元素，使用戶知道有沒有必要輸入http：//所以它看起來就像如果有中已經是一個值，但隨後它是輸入上的跨度元素？我想我可以用CSS定位來做到這一點。

我不能使用佔位符，因爲我不希望它被刪除。

來源

2013-12-18 EasyDevop

正如你所提到的，你需要使用的定位和包裝與跨度的投入股利或一些其他的元素。

.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

來源

2013-12-18 08:43:36 Morpheus

是這樣的：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>

來源

2013-12-18 08:41:44 caramba

你的小提琴沒有顯示跨越輸入，但它的一面。 – casraf

更新了答案（修改了餘量 - 左邊填充左邊） – caramba

這有效，但您可以知道輸入中的文本位於量程頂部，反之亦然。它看起來並不完美。你怎樣才能在輸入上覆蓋一個跨度，並且每個字母都要覆蓋它下面的跨度，沒有那些奇怪的字母，看起來像？ –

這是一個有點老帖子，但這樣做並沒有使用定位更簡單的方法。包裝形式中的每個元素的列表項的設置顯示爲「inline-block的」和跨度，以這樣的「塊」顯示 -

li{ 
    display: inline-block; 
} 

li span{ 
    display: block; 
}

這樣，你會需要交換的次序html元素像這樣 -

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

但是，如果您希望跨度顯示在輸入元素的底部，則可以保持不變。

來源

2015-12-22 14:40:15

使用HTML + CSS在輸入上顯示跨度

回答

相關問題