文本框背景圖片

Question

它必須是一個常見的問題，但我真的不能找到任何解決方案。有一個文本字段（文本將從右到左寫），它有一個彎曲的背景圖像。問題在於遊標必須僅保留在紅色框區域中。

以下是我提出的四種解決方案。

1 - 創建與背景圖像的DIV，把一個文本框在裏面。

除非文本框是透明的，否則它將覆蓋背景圖片。使用CSS將其設置爲透明？我擔心有些瀏覽器不支持它:(

2 - 印章的背景圖像分割成3個部分（左 - 中 - 右）和連接它們放在一起的文本字段定位在。 。中期股利

這是正常的...但代碼看起來凌亂：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

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

我以這種方式成功了。我只是創建了1px寬的透明PNG圖像文件，並將其用作輸入字段背景，而不是使用CSS3透明。我不確定這是否是最好的方法......但似乎有效。

Answer 2

左右添加一些填充，所以背景圖片仍然會出現，但文字永遠不會在側面。