带有背景图像的html输入

Question

大家好，我已经在我的输入文本和文本区域设置了背景图片，但我有一些小问题

我附上了图片。 我如何更改名称文本输入中的文本开始位置？

我的文字区域比我的背景图片大

这是我的姓名文本输入样式

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;
    }

这是我的文本区域

<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;
    }

有什么建议吗？

Answer 1

将输入的 padding-left 设置为更大的值，并减小文本区域的宽度。

当您设计表单时，最好在您的输入周围放置一个临时边框，以查看它们的实际位置，完成后将其取下。