带有背景图像的 html 输入
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8843571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html input with background image
提问by Irakli Lekishvili
Hello guys i have set background image on my input text and text area but i have few little problems
大家好,我已经在我的输入文本和文本区域设置了背景图像,但我有一些小问题
I have attached image. How i can change text start up position in Name text input?
我附上了图片。如何更改名称文本输入中的文本启动位置?
and my text area is bigger then my background image
并且我的文本区域比我的背景图片大
this is my Name text input with style
这是我的带有样式的名称文本输入
input type="text" name="txtName" class="input" />
.input
{
border: 0px solid #444444;
height:39px;
width:346px;
background:url(images/Contact_05.jpg) no-repeat right top;
color:#fff;
padding-left:4px;
font-size:20px;
}
and here is my text area
这是我的文本区域
<textarea rows="5" cols="0" class="inputMessage"></textarea>
.inputMessage
{
border:0px solid #444444;
height:386px;
width:685px;
background:url(images/Contact_20.jpg) no-repeat left top;
padding-left:4px;
color:#fff;
font-size:20px; resize:none;
}
any advice?
有什么建议吗?
采纳答案by Matt K
Set the padding-left to a greater value on your inputs, and decrease the width of your textarea.
将输入的 padding-left 设置为更大的值,并减小 textarea 的宽度。
When you're designing your form it would be good to put a temporary border around your inputs to see where they are actually positioned, and when you're done just take it off.
当您设计表单时,最好在输入周围放置一个临时边框以查看它们的实际位置,完成后将其取下。
回答by Erick
padding:10px;
(or more) on input
and textarea
.
(或更多)在input
和 上textarea
。