輸入框中的圖標與內容和：之前而不是背景圖像

我的問題是我有這個很好的字體集，我用它來放置我的按鈕旁邊的自定義圖標。（即：see here）輸入框中的圖標與內容和：之前而不是背景圖像

但現在我想創建一個輸入框，把一個圖標纔會像HERE

但不是一個背景圖片我想提出一個字體的內容之前，這是可能的？

2014-03-02 Noitidart

CSS

.input-box { position: relative; } 

input { display: block; border: 1px solid #d7d6d6; background: #fff; padding: 10px 10px 10px 20px; width: 195px; } 

.unit { position: absolute; display: block; left: 5px; top: 10px; z-index: 9; }

HTML

<div class="input-box"> 
    <input value="" autofocus="autofocus"/> 
    <span class="unit">To;</span> 
</div>

檢查下面的例子在這裏

http://jsfiddle.net/pZLcg/52/

來源

2014-03-02 10:41:22 Naeem

啊，這是非常有趣！感謝Naeem人！在使用內容之前/之後沒有方法嗎？ :(因爲用這種方法我們創建了一個div和東西:( – Noitidart

嘿，我讓這個[這裏]（http://jsfiddle.net/Noitidart/pZLcg/54/）我想要紅色文本框來填充可用內容100％（因爲在任何TO :)不佔用）這是可能的嗎？ – Noitidart

這是你想要什麼？http://jsfiddle.net/pZLcg/55/ – Naeem

輸入框中的圖標與內容和：之前而不是背景圖像

回答

相關問題