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;

因为它现在看起来不像是一个按钮。

将搜索表单按钮文本更改为图像

4 个答案: