Текст переполняется на пользовательский <input type = "text" white border

Question

У меня есть настраиваемый фон для элемента <input type="text">, однако текст в настоящее время перекрывает его, то есть он разливается снаружи при вводе (который isn это должно произойти), так как изображение имеет белую рамку вокруг него.

Вот 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>