Home/ Questions/Q 8126065
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T07:01:50+00:00

I’m trying to create a custom form input that utilizes some images, it should

  • 0

I’m trying to create a custom form input that utilizes some images, it should look like this:
enter image description here

I’ve tried the following:

<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>

Which results in:

enter image description here

Why?? I’m not only interested in the solution, but also in the reason why this doesn’t work. I think my understanding of inline elements put next to each other is flawed.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try setting the vertical-align to top

    form * {vertical-align:top;}

    also remove the spaces between the imgs and the input

    • 0