Question

=“”

我有一个元素<input type="text">的自定义背景，但当前文本重叠＆＃39;它意味着当你打字时它会溢出外面（这并不意味着发生），因为图像周围有白色边框。

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

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

我尝试将padding: 10px添加到班级.maininput，这样就可以解决文字溢出到左侧的白色边框，但不会将文字溢出到右侧。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

文字溢出到自定义<input type =“text”white =“”border =“”

1 个答案: