Setting an Input Box Background

css, forms, input, layout

Solution

Fiddled:

<div class="input-container">
    <input type="text" value="aaaaaaaaaaaaaaaaaa"/>
</div>

.input-container {
    background: url(https://i.stack.imgur.com/0Vlc5.png) no-repeat;
    width:197px;
    height:28px;
}
.input-container input{
    height:28px;
    line-height:28px;/*results in nice text vertical alignment*/
    border:none;
    background:transparent;
    padding:0 10px;/*don't start input text directly from the edge*/
    width:148px;/*full width - grey on the side - 2*10px padding*/
}

If you're planning to reuse it with different widths, you should look up the sliding doors technique.

Problem

I have to create an input box with the following background So far in my code I have the code below and its not showing -> What would be the correct procedure to do this? I also have a couple of variations of this button I have to produce and they are the following: A cross on the dark area of the button - I was just going to use a `<span>` tag with a class and set the graphic to that -> Would this be a good way to go? A paper clip icon just after the curve on the left -> I was going to do the same as above -> Would this be a good way to go? HTML: ``` <div class="innerTo"> <form action="#" method="get"> <label for="recipients">TO: </label> <input type="search" name="recipients" id="recipients" placeholder="Recipients Names"> </form> </div> ``` CSS: ``` .innerBar .innerTo{ width:200px; padding:5px 0 0 15px; display:block; float:left; } .innerBar .innerTo label{ margin:0 15px 0 0; font-size:14px; font-weight:bold; color:#666666; } .innerBar .innerTo input[type=search] { color: red; } .innerBar .recipients{ background-image:url('../images/searchBGpng.png') no-repeat; width:192px; height:27px; } ```

Original source