我为元素 <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
这解决了文本溢出到左侧白色边框的问题,但不是文本溢出到右侧的问题。
最佳答案
这是将文本保留在背景中的另一种方法。您可以像 (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>
关于html - 文本溢出到自定义 <input type ="text"白色边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35398869/