將搜索表單按鈕文本更改爲圖像

Question

我似乎無法解決以下問題。所以我購買了一個搜索表單的模板，然後我改變了它以適應我的設計要求，但似乎無法將value = s位更改爲搜索框按鈕的圖像。請參閱http://jsfiddle.net/p9URB/。代碼如下：

HTML

<form action="/search" method="get" id="search_form" class="clearfix voicetron" data-ds-protection="enabled"> 
        <div id="search_holder"> 
         <input type="text" id="search_field" name="q" value="" title="Enter search term" placeholder="Search" data-validators="required" data-speech-enabled="" data-search-engine="oracle" x-webkit-speech="x-webkit-speech" autocomplete="off"> 
         <input type="text" id="search_suggest" value="" placeholder="" disabled=""> 
         <input type="submit" value="y" data-submit-text="s" class="btn_search iconify" title="Search"> 
        </div> 
       </form> 

CSS

    #search_form{ 
         position:relative; 
         margin:10px 0; 
         float:right 
        } 

        #search_form #search_holder{ 
         display:block 
        } 

        #search_form #search_holder input[type="text"]{ 
         font-size:13px; 
         width:180px; 
         height:26px; 
         margin:0; 
         position:absolute; 
         right:0; 
         padding:0 32px 0 6px 
        } 

        #search_form #search_holder #search_field{ 
         z-index:3; 
         border:1px solid #C9C9C9; 
         background:url("") #fff; 
         -webkit-border-radius:5px; 
         -moz-border-radius:5px; 
         -o-border-radius:5px; 
         -ms-border-radius:5px; 
         border-radius:5px; 
         text-shadow:0 0 1px #fff 
        } 

        #search_form #search_holder #search_field:focus,#search_form #search_holder #search_field:hover{ 
         border-color:#acb1b4; 
         color:#123 
        } 

        #search_form #search_holder #search_field:-moz-placeholder{ 
         color:#a6a7a8 
        } 

        #search_form #search_holder #search_field::-webkit-input-placeholder{ 
         color:#a6a7a8 
        } 

        #search_form #search_holder #search_field:-moz-placeholder{ 
         color:#a6a7a8 
        } 

        #search_form #search_holder #search_suggest{ 
         z-index:2; 
         border:none; 
         background:#fff; 
         border:1px solid #fff; 
         -webkit-border-radius:5px; 
         -moz-border-radius:5px; 
         -o-border-radius:5px; 
         -ms-border-radius:5px; 
         border-radius:5px; 
         color:#9da2a8 
        } 

        #search_form #search_holder .overTxtLabel{ 
         z-index:113 
        } 

        #search_form .active{ 
         color:#fff; 
         background:#a6a7a8 
        } 

        #search_form .btn_search{ 
         z-index:3; 
         position:absolute; 
         top:4px; 
         right:1px; 
         display:block; 
         color:#a6a7a8; 
         width:28px; 
         height:21px; 
         font-size:17px; 
         line-height:21px; 
         text-align:center; 
         font-weight:400; 
         background:0 0; 
         border:0; 
         border-left:1px dotted #a6a7a8 
        } 

        #search_form .btn-anchor{ 
         background:0 0; 
         border:0; 
         border-bottom:1px solid #ccc; 
         color:#666; 
         margin:0 10px; 
         font-size:10px; 
         padding-bottom:2px; 
         font-weight:400 
        } 

        #search_form.voicetron [name="q"]{ 
         padding-right:34px; 
         width:170px; 
         line-height:17px 
        } 

        #search_form.voicetron .btn_search{ 
         color:#71767a 
        } 

Answer 1

您可以使用image輸入類型爲您的提交按鈕：

<input type="image" src="/my/image/location.png" /> 

而是造型起來一個提交按鈕。據我所知，輸入類型image複製了submit按鈕的提交行爲。

Answer 2

將此添加到btn_search iconify css類並指定圖像。

background: url("your_url.png") no-repeat scroll 0 0 transparent; 

Answer 3

您已設置輸入value="s"所以將其更改爲value=""，並添加背景圖片該按鈕

#search_form.voicetron .btn_search{ 
    color:#71767a; 
    background-image:url('http://findicons.com/files/icons/1389/g5_system/16/toolbar_find.png'); 
    background-repeat:no-repeat; 
} 

Js Fiddle

Answer 4

你可以簡單地把按鈕作爲一個塊元素，刪除文本與 text-indent:-9999px; 然後設置背景圖像。

你可能也想添加

cursor:pointer; 

因爲它看起來並不像此刻的按鈕。