CODEWITHSUNDEEP
htmlcss
Kadeem L
Kadeem L

Reputation: 863

Change search form button text to image

I can't seem to get my head around the following problem. So I procured a template of a search form which I then changed to fit my design requirements but I can't seem to be able to change the value=s bit to an image of a search box button. Please see http://jsfiddle.net/p9URB/. The code is as follows:

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
                    }

Upvotes: 1

Views: 9070

Answers (4)

user2443639
user2443639

Reputation: 55

You can simply treat the button as a block element and remove the text with text-indent:-9999px; then set a background image.

You probably also want to add

cursor:pointer;

As it doesn't look like a button at the moment.

Upvotes: 0

Sachin
Sachin

Reputation: 40970

You have set input value="s" so change it to value="" and add background image for that button

#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

Upvotes: 0

Pramod Ravikant
Pramod Ravikant

Reputation: 1037

Add this to btn_search iconify class of css and specify an image.

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

Upvotes: 0

dKen
dKen

Reputation: 3127

You can use an input type of image as your submit button:

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

Instead of styling up a submit button. As far as I know, the input type of image replicates the submit behaviour of a submit button.

Upvotes: 3

Related Questions