CODEWITHSUNDEEP
htmlcss
Durga
Durga

Reputation: 65

search image is not getting displayed properly

When I use type=image of input name =searchsel_list than i get image displayed properly ,but i don't get the result which i want to be displayed onclick of that search ,so I changed its type=submit so i got the result but now image is not getting displayed 

<div id="tabr"><form id="quick-search" action="csearch.php?epage=csearch"  method="post" >
<p>
<label for="qsearch">Search:</label>
<input class="tbox" id="qsearch" type="text" name="tsearch" placeholder="Search Selected Candidate" title="Type name and hit ENTER" />
<input type="submit" class="btn" alt="Search" name="searchsel_list" title="Search"  />
</p>
</form></div>

The CSS

 #tabr form#quick-search {
    padding: 0; margin: 30px 0 0 30px;
    width: 270px; height: 33px;
    background: #fff url(../images/header-search.gif) no-repeat;
    border: none;   
}
#tabr form#quick-search p {
    margin: 0; padding: 0;      
    border: none;
}
#tabr form#quick-search input {
    border: none;
    background: transparent;
    color: #BABABA;
    margin: 0; padding: 5px;
    font-size: .9em;    
    float: left;        
}
#tabr form#quick-search .tbox {
    margin: 6px 0 0 5px;
    width: 220px;   
    display: inline;    
}
#tabr form#quick-search .btn{
    width: 24px; height: 24px;      
    margin: 5px 0 0 0;  padding: 0; 
}
#tabr form#quick-search label {
    display: none;
}

I tried this but even this is not working

<button type="submit" class="btn" alt="Search" name="searchsel_list" title="Search"><img src="images/header-search.gif" /></button>

how can I get image displayed again,THANKS

Upvotes: 0

Views: 78

Answers (1)

user1130272
user1130272

Reputation:

What i see you only specified a background for the form it self, nothing for the submit, add a nother class to it

example:

<input type="submit" class="btn quickSubmit" name="searchsel_list" title="Search"  />

CSS

.quickSubmit {
    background-image: url(path/to/your/image);
        background-position:  0px 0px;
        background-repeat: no-repeat;
        width: add image width;
        height: add image height;
        border: 0px;
        text-indent: -9999px; /* this is to hide the submit buttons text */
}

EDIT:

Sorry now i see your btn class too either remove it and replace it with my example or change your btn class states with the example above

Upvotes: 1

Related Questions