带有背景图像的 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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 12:31:48  来源:igfitidea点击:

html input with background image

htmlcss

提问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? enter image description here

有什么建议吗? 在此处输入图片说明

采纳答案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 inputand textarea.

(或更多)在input和 上textarea