SMARTY：ヘッダー検索

Question

ちょっとした問題があります。たぶん誰かが本当に素早く手伝ってくれるかもしれない。私のウェブサイトに実装されているこのNavbar（以下のコード）を持っています。それはちょうどウェルカムテキストと検索ですが、検索は適切に表示されません。私はここの検索のような結果を、テキスト入力の右側にあるアイコンだけで、Stackoverflowで欲しいと思っています。 index.htmlをで

コード：search_header.phpで

{if strstr ($smarty.server.PHP_SELF, 'index')} 
       <div class="{if strpos($smarty.server.PHP_SELF, 'checkout')}span12{else}span9 desk9{/if}" style="left: 0px;"> 
        <div class="navbar navbar-default"> 
          <div class="container"> 
           <ul class="nav pull-left" >        
            <li class="navbar-text"> HERZLICH WILLKOMMEN </li> 
           </ul> 
           <ul class="nav pull-right" >  
            <li class="navbar-search">{$box_SEARCH_HEADER}</li> 
           </ul> 
          </div> 
        </div> 
        {/if} 
       </div> 

コード：

<? php 
$box_smarty = new smarty; 
$box_smarty->assign('tpl_path', 'templates/' . CURRENT_TEMPLATE . '/'); 
$box_content = ''; 

require_once (DIR_FS_INC . 'xtc_hide_session_id.inc.php'); 

// BOF - GTB - 2010-09-20 - correct the Formular in dependences of the request type SSL/NONSSL 
$box_smarty->assign('FORM_ACTION', xtc_draw_form('quick_find_header', xtc_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get') . xtc_hide_session_id()); 
//$box_smarty->assign('FORM_ACTION', xtc_draw_form('quick_find', xtc_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get') . xtc_hide_session_id()); 
// BOF - GTB - 2010-09-20 - correct the Formular in dependences of the request type SSL/NONSSL 
//BOF - Dokuman - 14.08.2009 - Put dynamic "search"-text into box 
//$box_smarty->assign('INPUT_SEARCH', xtc_draw_input_field('keywords', '', 'size="20" maxlength="30"')); 
//BOF - web28 - 2010-04-11 - change input html size to css width 
//$box_smarty->assign('INPUT_SEARCH', xtc_draw_input_field('keywords', IMAGE_BUTTON_SEARCH, 'size="20" maxlength="30" onfocus="if(this.value==this.defaultValue) this.value=\'\';" onblur="if(this.value==\'\') this.value=this.defaultValue;"')); 

$search = xtc_draw_input_field('keywords', IMAGE_BUTTON_SEARCH, 'class="span11" onfocus="if(this.value==this.defaultValue) this.value=\'\';" onblur="if(this.value==\'\') this.value=this.defaultValue;"'); 
$search .= xtc_image_submit('button_quick_find.gif'); 
$box_smarty->assign('INPUT_SEARCH', $search); 

//$box_smarty->assign('INPUT_SEARCH', xtc_draw_input_field('keywords', IMAGE_BUTTON_SEARCH, 'class="span11" onfocus="if(this.value==this.defaultValue) this.value=\'\';" onblur="if(this.value==\'\') this.value=this.defaultValue;"')); 
//EOF - web28 - 2010-04-11 - change input html size to css width 
//EOF - Dokuman - 14.08.2009 - Put dynamic "search"-text into box 
$box_smarty->assign('FORM_END', '</form>'); 
$box_smarty->assign('LINK_ADVANCED', xtc_href_link(FILENAME_ADVANCED_SEARCH)); 
$box_smarty->assign('BOX_CONTENT', $box_content); 
$box_smarty->assign('PLACEHOLDER', IMAGE_BUTTON_SEARCH); 

$box_smarty->assign('language', $_SESSION['language']); 
$box_smarty->caching = 0; 
$box_search_header = $box_smarty->fetch(CURRENT_TEMPLATE . '/boxes/box_search_header.html'); 

$smarty->assign('box_SEARCH_HEADER', $box_search_header); 

>

コードbox_search_header.html：？

{$FORM_ACTION|replace:'<form':'<form class="navbar-search pull-right"'} 
{$INPUT_SEARCH|replace:'span11"':'search-query span2" placeholder="gggg"'|replace:'gggg':"`$PLACEHOLDER`"} 
{$FORM_END} 

今はcss-fil E：ページを開いたときに私が得る

#quick_find_header input { 
    background-color: #515151; 
    border-color: #111111; 
    color: #999; 
    } 
    #quick_find_header input:focus { 
    box-shadow: none; 
    color:#fff; 
    } 

最終的なコード：

<div class="navbar navbar-default"> 
           <div class="container"> 
            <ul class="nav pull-left" >        
             <li class="navbar-text"> HERZLICH WILLKOMMEN </li> 
            </ul> 
            <ul class="nav pull-right" >  
             <li class="navbar-search"> 
<!-- Orginal 
<form class="navbar-search pull-right" id="quick_find_header" action="http://vorschau2.de.dedi2539.your-server.de/fitinart.com/advanced_search_result.php" method="get"> 
    <input type="text" name="keywords" value="Suchen" class="search-query span2" placeholder="Suchen" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" /><input type="image" src="templates/bootstrap/buttons/german/button_quick_find.gif" alt="" /> 
</form> 
--> 

<!--Ãnderung --> 
<form class="navbar-form pull-right" id="quick_find_header" action="http://vorschau2.de.dedi2539.your-server.de/fitinart.com/advanced_search_result.php" method="get"> 
    <input type="text" name="keywords" value="Suchen" class="span2" placeholder="Suchen" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" /><input type="image" src="templates/bootstrap/buttons/german/button_quick_find.gif" alt="" /> 
</form></li> 
            </ul> 
           </div> 

         </div> 

Answer 1

だけで、テキスト入力に背景画像を使用して右にいくつかのパディングを追加して、画像のボタンを削除します。すなわち

#quick_find_header input{ 
    padding-right:25px; 
    background:url(image.png) right center; 
}