html - 文本溢出到自定义 <input type ="text"白色边框

Question

我为元素 <input type="text"> 设置了自定义背景，但是文本当前“重叠”它，这意味着当您键入时它会溢出到外面(这不是故意发生的)，因为图像周围有白色边框。

这是一个 JsFiddle:https://jsfiddle.net/dnf419y5/

这是我的代码:

 .maininput {
         background-image: url('http://questers.x10.mx/images/inputbox.png'); 
         background-repeat: no-repeat;
         width: 418px; 
         height: 95px;
         border: 0px;
         outline: none;
         font-size: 20px;
        }

        <form method="post">
        <input type="text" class="maininput" placeholder="text..">
        </form>

我试图添加 padding: 10px上课.maininput这解决了文本溢出到左侧白色边框的问题，但不是文本溢出到右侧的问题。

Answer 1

这是将文本保留在背景中的另一种方法。您可以像 (your-background-width - (2 * padding)) 这样计算输入的宽度。对于这个例子，它是 418px - (2 * 30px)。

.maininput {
    background-image: url('http://questers.x10.mx/images/inputbox.png'); 
    background-repeat: no-repeat;
    width: 358px; 
    height: 95px;
    border: 0px;
    outline: none;
    font-size: 20px;
    padding: 0 30px;
}

<form method="post">
    <input type="text" class="maininput" placeholder="text..">
</form>