如何給邊框添加背景圖片？

enter image description here 如何給邊框添加背景圖片？

使用背景圖片輸入框和填充值會顯示這樣的：

enter image description here

現在怎麼右邊框適用於背景圖片？

或者，最佳做法是什麼？

我一樣有這些投入

<form> 
    <input type="text" /> 
    <input type="text" /> 
    <input type="submit" /> 
</form>

CSS

input{background: url('path') no-repeat left center; padding-left: 50px;}

來源

2014-02-19 Navin Rauniyar

多個選項，邊界圖像，使用'：before'僞元素，或一個真正的元素（或者如果你的目標是支持的瀏覽器，多個背景圖像） – SmokeyPHP

這取決於你當前的代碼是什麼。我們可以看到它嗎？ – George

添加到問題。 –

我想補充的border-right背景圖像像這樣：

CSS

input[type=text]{ 
    background: url('http://uploadpie.com/LctRy') no-repeat left center; 
    padding: 18px 0 18px 70px; 
    border: 1px solid #eaeaea; 
    font-size: 17px; 
    color: #999; 
}

Demo

來源

2014-02-19 11:23:28 AfromanJ

謝謝。任何其他方式改變HTML標記？ –

使用不同的HTML標記有多種方法。你需要一個不同的解決方案來提供我所提供的？ – AfromanJ

是不同的解決方案。假設如果我喜歡這個+ ---- + [輸入和圖像之間的空格] + ---- +，所以我認爲整體CSS將適用於其他類型的輸入框。所以我混淆了HTML標記什麼會更好。 –

您可以只添加邊框的背景圖像。如果您不是針對IE6的瀏覽器。如果你是從IE6檢查，那麼你必須將文本框包裹在span或div中，並將背景圖像添加到div。希望這可以幫助。

來源

2014-02-19 11:26:25 Bala

嗯，我打了一些盒子陰影和我想出了這個

FIDDLE

input[type="text"] { 
    padding: 15px; 
    border: 1px solid #ccc; 
    padding-left: 60px; 
    background-image: url("http://i.imgur.com/m8lJN4g.png"); 
    background-repeat: no-repeat; 
    background-position: 2px 3px; 
    box-shadow: inset -175px 0px #fff, inset -176px 0px #ccc; 
}

來源

2014-02-19 11:46:09

在Chrome中很好，但不是在Firefox中工作。 – AfromanJ

它也在ff工作。只是陰影的長度較大。 –

+1。不錯的一個，但與盒子陰影我不想烏姆希望得到建議的HTML標記，會更好地使用。謝謝。 –

如何給邊框添加背景圖片？

回答

相關問題