0

在此处输入图像描述

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

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


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

2 回答 2

1

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

于 2013-07-04T18:12:35.690 回答
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;
}

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

于 2013-07-04T18:47:04.977 回答