textfield with background image

Question

It must be a common issue but I really can't find any solutions for it. There is a textfield (texts will be written from right to left) and it has a curvy-side background image. The problem is the cursor must stay only in the red box area.

The following is the four solutions I've come up with.

1 - Create a div with the background image and put a textfield in it.

Unless the textfield is transparent, it will cover the background image. Setting it transparent using CSS? I'm worried about some browsers not supporting it :(

2 - Chop the background image into 3 parts(left - mid - right) and connect them all together. The textfield is positioned in the mid div.

This is okay... but the code will look messy :S ... :before :after selectors come in handy maybe?


3 - background image stays the same but the textfield size is decreased and positioned center.

This will be the best solution for it but clueless how to do.

4 - Hey, WHY NOT JUST USE CSS3 ??

The background image has a company logo and this cannot be done with CSS... :(

Would there be a better solution that supports all the browsers? :(

Code ---

<div id="navigation" class="float-right">                   
<ul>
    <li><?php echo anchor('.', 'HOME'); ?></li>
    <li><?php echo anchor('company', 'COMPANY'); ?></li>
    <li><?php echo anchor('#', 'PRODUCTS'); ?></li>
    <li><?php echo anchor('#', 'SUPPORT'); ?></li>
    <li><?php echo anchor('contact', 'CONTACT'); ?></li>
    <li><input type="text"></input></li>
</ul>
</div>

CSS ---

#navigation ul li{
display: inline;
}
#navigation ul li input
{
background:url(../images/common/search_bar.jpg) no-repeat left top;
width:113px;
height:18px;
border: 0px;
text-align: right;
outline: none;
}

Answer 1

<div id="navigation" class="fr">                    
    <ul>
        <li><?php echo anchor('.', 'HOME'); ?></li>
        <li><?php echo anchor('company', 'COMPANY'); ?></li>
        <li><?php echo anchor('#', 'PRODUCTS'); ?></li>
        <li><?php echo anchor('#', 'SUPPORT'); ?></li>
        <li><?php echo anchor('contact', 'CONTACT'); ?></li>
        <li><div id="search-bar"><input type="text"></input></div></li>
    </ul>
</div>

#search-bar
{
    background:url(../images/common/search_bar.jpg) no-repeat top left;
    width:115px;
    height:18px;
    display: inline-block;
}
#search-bar input
{
    width:80px;
    height:18px;
    text-align: right;
    border: 0px;
    outline: none;
    background:url(../images/common/transparent.png) repeat-x;
}

I succeeded it in this way. Instead of using CSS3 transparent, i just created 1px width transparent png image file and used it as the input field background. I'm not sure if it's the best way... but it seems working.

Answer 2

Add some padding right and left so the background image will still appear but the text will never go on the side.