Question

我正在尝试创建一个使用一些图片的自定义表单输入，它应该如下所示： enter image description here

我尝试了以下内容：

<style>
input {
    background-image: url(../img/search-background-middle.png);
    background-repeat: repeat-x;
    padding: 17px 0;
    font-size: 12px;
    border: none;
    margin: 0;
}

form {
    padding: 0;
    margin: 0;
}
</style>

<body>
<form>
    <img src="../img/search-background-left.png"/>
    <input type="text" value="   start typing to search..." size="40" maxlength="255"         />
    <img src="../img/search-background-right.png"/>
</form>
</body>

结果是：

enter image description here

为什么？我不仅对解决方案感兴趣，而且还因为这不起作用的原因。我认为我对彼此相邻的内联元素的理解是有缺陷的。

Answer 1

尝试将vertical-align设置为顶部

form * {vertical-align:top;}

同时删除img和input

之间的空格

Answer 2

删除img和input元素之间的空格（包括换行符）
在input元素上设置高度和行高以匹配图像高度
在input上将填充和边距设置为0。

Answer 3

你可能还需要添加一个浮点数：left！important;对输入。当事情没有排队时，有时会解决我的问题

带图像的自定义表单输入无法正确显示

3 个答案: