html - 带有背景图像的文本字段

Question

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

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

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

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

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

这没关系...但是代码看起来会很乱 :S ... :before :after 选择器也许会派上用场？


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

左右添加一些填充，这样背景图片仍会出现，但文本永远不会出现在旁边。