如何给边框添加背景图片？

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标记，会更好地使用。谢谢。 –

如何给边框添加背景图片？

回答

相关问题