文本域与背景图像

Question

这一定是一个常见的问题，但我真的找不到任何解决方案。有一个文本字段（文本将从右到左书写），它有一个弯曲的背景图像。问题是光标必须只留在红色框区域。

以下是我提出的四种解决方案。

1 - 使用背景图片创建一个div并在其中放置一个文本字段。

除非文本字段是透明的，否则它将覆盖背景图像。使用CSS将其设置为透明？我担心有些浏览器不支持它:(

2 - 将背景图像分成3个部分（左 - 中 - 右）并将它们连接在一起。文本字段位于mid div。

这没关系...但是代码看起来会很乱：S ......：之前：选择器派上用场后可能会派上用场吗？


3 - 背景图像保持不变，但文本字段大小减小并位于中心。

这将是最好的解决方案，但无法怎样做。

4 - 嘿，为什么不使用CSS3？

背景图片有公司徽标，这不能用CSS ... :(

是否有更好的解决方案支持所有浏览器？ ：（

代码---

<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

左右添加一些填充，以便仍然显示背景图像，但文本永远不会出现在旁边。

Answer 2

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

我以这种方式取得了成功。我没有使用CSS3透明，而是创建了1px宽度的透明png图像文件，并将其用作输入字段背景。我不确定这是不是最好的方式......但它似乎有效。