將圖標放入文本輸入字段

我嘗試將圖標放入文本輸入字段。
實施例：
example
將圖標放入文本輸入字段

的一個解決方案是使用背景圖像，然後使用填充左。

但我想用css精靈。我試過下面的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 

    .input { 
     padding-left:35px; 
     width: 128px; 
     background: Red; 

    } 



    .sprite:before{ 
     background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png'); 
     content: " "; 
     position: absolute; 
     height:32px; 
     width:32px; 
     margin: -10px 0 0 -10px; 
     z-index:100; 
    } 


    .sprite:before { 
     background-position: -32px 0; 
    } 

    </style> 
</head> 
<body> 

    <input type="text" class="input sprite"></input> 

</body> 
</html>

我在做什麼錯？

來源

2013-11-14 POIR

對不起，我不知道你的解決方案爲什麼不起作用。我自己試了一下，但是在-Tag裏面加了一個-Tag。

那麼，這樣的事情呢（快和骯髒！）呢？

或者您的意思是：「一種解決方案是使用背景圖像，然後使用填充左。」？

enter image description here

<!DOCTYPE html> 
<html> 
<head> 
<style> 
input 
{ 
    width: 250px; 
    height: 65px; 
    padding-left: 85px; 
} 
img.home 
{ 
    width:85px; 
    height:65px; 
    background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png') 0 0; 
    position: absolute; 
    left: 10px; 
    top: 10px; 
} 

</style> 
</head> 

<body> 
<input type="text" class="input"/><img class="home"> 
</body> 
</html>

來源

2013-11-14 13:47:49 fen89

我不知道什麼是預期的效果，但我想既然你無法看到圖像，你就會有麻煩回答這個自己，所以，指出什麼在示例標記中出現錯誤，這是在輸入元素中使用:before。正如您在this answer中看到的那樣，像::before和::after這樣的僞元素只能應用於容器。

簡單地改變你的標記來

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 

.input { 
    padding-left: 35px; 
    width: 128px; 
    background: Red; 
} 

.sprite:before { 
    background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png'); 
    content: ""; 
    position: absolute; 
    height: 32px; 
    width: 32px; 
    margin: -10px 0 0 -10px; 
    z-index: 100; 
} 

.sprite:before { 
    background-position: -32px 0; 
} 

</style> 
</head> 
<body> 

<div class="sprite"> 
    <input type="text"class="input"></input> 
</div> 

</body> 
</html>

可能是你心目中是什麼一個很好的起點。

來源

2014-11-27 13:40:09 Herick

將圖標放入文本輸入字段

回答

相關問題