Theming The Search Submit Button - A CSS Cross-Browser Compatible Solution

More sites these days are using a custom image like a magnifying glass, or the word 'GO' in a circle, instead of the default search submit button. Here's a way that you can do the same thing with the Drupal search function, and only have to use CSS - no PHP and no editing template files (well, almost).

The image on the left shows the default search submit button, and the image on the right shows the new search submit button that we'll replace it with.

The default search box and the new search box

It's really just a simple three step process:

  • Step 1: Create your image
  • Step 2: Add a conditional comment to your page.tpl.php file
  • Step 3: Add your CSS

Step 1: Create your image

The image can be of whatever you like, and is probably best in .jpg format.

Just make sure you save it into your theme's normal images folder.

For instance, if I am going to use an image of a magnifying glass called 'mag_glass.jpg' I would save it to '/sites/all/themes/mydrupalblog/images/mag_glass.jpg'

Step 2: Add a conditional comment to your page.tpl.php file

A conditional comment is just a small bit of code which we add to the page.tpl.php file in order to allow us to specifically target Internet Explorer with different CSS rules.

As you'll see in a second, this is necessary because Internet Explorer interprets our CSS differently, and we need to supply it with some extra rules to make it look right.

In short, you just need to add the following code to your page.tpl.php file directly after the opening body tag

<!--[if IE]><div id="IEroot"><![endif]-->

and then add the following directly before the closing body tag.

<!--[if IE]></div><![endif]-->

Basically, this creates a new div with an id of 'IEroot' which wraps around everything inside of our body tags if a user is browsing with Internet Explorer, and ignores it if a user is using any other browser like Firefox. This allows us to write CSS which targets the #IEroot, and know that it will only be used by IE - very handy.

For those who are interested, a detailed explanation of this method can be found in
this article over at positioniseverything.net.

Step 3: Add your CSS

Finally, we add the necessary CSS to our style.css file.

We'll start by adding the general rules which cover most browsers

#search-block-form input.form-submit, #search-form input.form-submit {
height: 24px;
width: 24px;
cursor: pointer;
text-indent: -9999px;
border: none;
background: url(images/mag_glass.jpg) no-repeat left top;
}

The above code covers both the search block and the search form on the main page. Just remember to change the height and width accordingly for your own image.

This now looks great in Firefox, but not so good in IE.

The search box in Firefox and the search box in IE

The problem is that IE will not text-indent the text on the submit button. Also, IE now completely removes the search submit button from the Advanced search fieldset on the main page.

The advanced search form in Firefox and IE

So, we need to find a sneaky way of making it look like the text has actually been removed from IE when it hasn't, and also sort out that missing search button.

The following code will do the trick:

#IEroot .block-search input.form-submit, #IEroot #search-form input.form-submit {
width: 34px;
font-size: 0;
color: #fff;
text-align: right;
}
#IEroot #search-form .search-advanced input.form-submit {
width: 44px;
text-indent: 0;
}

Using the #IEroot selector, we first tell IE to make the text very small by declaring 'font-size: 0;' (FIG 1). However, IE still won't remove the text completely, so we then create an area to the right of the magnifying glass image into which we can put the text. We do this by changing the width of the image and setting 'text-align: right;' (FIG 2). You will need to add 10px to the search block image width, and 20px to the advanced search form image width for this to work. Finally, we change the font color to match with our background, in this case white, and this completes the illusion (FIG 3).

Sorting out the search box in IE

Lastly, adding 'text-indent: 0;' to the #IEroot advanced search form gets IE to give us our submit button back :)

So far, I have tested this in Firefox, IE7, and IE6. It might seem like a slightly hackish solution, but it avoids any necessity to try and catch the search form by editing the template.php file and then have to setup extra .tpl.php files. It also uses a relatively small amount of CSS, and is (hopefully) quite easy to understand.

43 comments

1
themegarden.orgJune 19th 2007 @ 03:03PM

Nice trick, I mean hack.
It's always a fun to fight with IE

2
LaurenceJune 19th 2007 @ 04:00PM

I'm not sure I'd use the word fun ;-)

3
ragaskarAugust 2nd 2007 @ 11:52PM

Clean CSS solutions are loads better than wacky template hacks that subvert the form api. Great bit of code! Thanks!

4
FiasstOctober 2nd 2007 @ 05:22PM

Ive used a custom search form before. Can't remember where I found it but It's very handy!

Just create a new page template called 'search-theme-form.tpl.php' and add the below PHP to your template.php file:

/**** Custom search form ****/
function phptemplate_search_theme_form($form) {
return _phptemplate_callback('search-theme-form', array('form' => $form));
}

Example of your custom search form:

<input type="text" name="searchfield" class="txt" title="Search" onfocus="inputc(this,'Search')" onblur="inputr(this,'Search');" value="Search" />
<input type="submit" name="op" id="edit-submit" title="go" value="go" />
<input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form" />
<input type="hidden" name="form_token" value="<?php print drupal_get_token('search_theme_form'); ?>" />

5
AdamOctober 4th 2007 @ 11:09AM

Fiasst, you probably found that bit of code here, and I couldn't agree more it is very handy!

6
Rene HacheNovember 1st 2007 @ 11:32PM

Laurence,

Thanks for the tip. I have a few of questions about your tip and I'm wondering if you could answer them:

-- The IE width is 10px more than the regular (ie 34px vs 24px). Why 10px? Is it always 10px more than whatever works in FF? Basically, how did you figure out that difference?

-- Can you get rid of the conditional IE DIV if you use conditional IE CSS?

Thanks,
Rene

7
Secret OwlApril 4th 2008 @ 01:48AM

Thanks a load mate, really helped my css-uneducated ass out! I should probably stop obsessing over little details, though; tis unhealthy.

8
KyleApril 14th 2008 @ 05:25AM

Nice trick - although, I should point out: No need for the additional div - just add that CSS you'd like for IE-only in between the comments (where you have the div). This will overwrite your "real" css file, and avoids extra markup! (You just have to make sure that the commented CSS comes after the link to your stylesheet).

9
MikeApril 24th 2008 @ 10:17AM

This rollover image submit button would probably serve 'most' peoples needs..

<input type="image" src="images/search.gif" onmouseover="this.src='images/searchon.gif'" onmouseout="this.src='images/search.gif'" alt="Hello World" title="Hello World"/>

Simple :)

10
Tom TaylorJune 4th 2008 @ 10:09AM

If you cant add a div for IE and use conditional tags, just use the underscore hack for IE Only:

_font-size: 0;
_color: #fff
_text-align: right;
_padding-right:2px;

Mozilla, Opera and Safari will ignore any CSS dec's with an underscore before them! ;)

11
KyleJune 4th 2008 @ 03:47PM

Worked like a charm! Thanks!

12
EglenJune 19th 2008 @ 05:24PM

Thanks a load mate, really helped my css-uneducated ass out! I should probably stop obsessing over little details, though; tis unhealthy.

13
hazır kayan yazıJune 20th 2008 @ 03:12PM

css Cursor examples , Properties , Attribute - - http://css-lessons.ucoz.com/cursor-css-examples.htm

14
freebirdJuly 31st 2008 @ 05:18PM

thanks for the tip -- this is exactly what I was looking for.

15
GuestAugust 4th 2008 @ 12:39PM

If the objective is to just push the text out of the way, you can just add :

line-height: 5;

to the submit input and avoid any hack

16
kktcAugust 23rd 2008 @ 09:05AM

Thanks m8 .

17
mikiSeptember 25th 2008 @ 11:42PM

Hi,
you can add

letter-spacing:100px;

then you need only one pixel more of input width :)
regards

18
Clint EagarOctober 2nd 2008 @ 05:55PM

@ Fiasst

How do I adapt this for D6?

/**** Custom search form ****/
function phptemplate_search_theme_form($form) {
return _phptemplate_callback('search-theme-form', array('form' => $form));
}

19
FriendOctober 10th 2008 @ 06:18PM

Thank you! Exactly what I needed as I only want to swap the search button and don't really feel it's necessary to add more template & tpl.php complexity.

20
MilesNovember 3rd 2008 @ 02:54AM

Great hack, thank you so much for this.

Cheers,
Miles

21
OusjahNovember 19th 2008 @ 02:31PM

Thanks.I have tested this in Firefox, IE7, and IE6, fortnately it worked fine. The text has been removed from IE when it hasn't ....fine. But it's not removed in Opera 9.26. Can anyone figure out something to prevent it from showing.

#IEroot .block-search input.form-submit, #IEroot #search-form input.form-submit {
width: 34px;
font-size: 0;
color: #fff;
text-align: right;
}
#IEroot #search-form .search-advanced input.form-submit {
width: 44px;
text-indent: 0;
}

22
GuestNovember 21st 2008 @ 04:51AM

> letter-spacing:100px;

the best one as for me =)

thx, miki.

23
Pieter BezuijenNovember 21st 2008 @ 02:41PM

Very handy and clear article! My theme is based on Garland, which has a function for a seperate 'fix-ie.css' stylesheet. I think that's much better than the extra div. Maybe you could add a note about that?

24
OusjahNovember 24th 2008 @ 03:42PM

miki......
Thanks so much....appreciate it so much.

........> letter-spacing:100px;........

Did work perfectly for me too...
Great help thanks.

25
iWishIeWorkedRightDecember 3rd 2008 @ 10:23PM

Thanks for the tip awesome code! I needed something that would work in ie6 since input [ type="text"] doesnt work with ie. Funny thing, I have been using css for a few years and using a class for the input types never occurred to me, I guess it has something to do with the fact that i always figure out the hard way to do things first, then go back and do it the easy way.

You could also hide the text using a something like this:

input.submit{
        display: inline;
border: 1px solid #666666;
width: 145px;
height: 0;
background:url(images/formBG.png) repeat-x center center;
        padding-top: 35px;
        overflow: hidden;
}

It works in Safari, and it should work in ie 6 considering I use it to hide text when creating nav bars. just set the padding to a value larger than the height of the image used for the button.

26
RecipesLoverDecember 23rd 2008 @ 08:08AM

Well have you tried your code iWishIeWorkedRight?
cause i try it on ie and it's not working

27
Daniel NordstromJanuary 9th 2009 @ 11:23AM

letter-spacing... That's genius. Thanks! :)

28
Guest Muy AgradecidoJanuary 22nd 2009 @ 06:06AM

Great way of hack IE... my god, how i hate that browser. Again, thank, because that way of hacking (adding conditional tags in the beginning and at the bottom of the body) is great for any kind of fix you have to do to the dammed IE!!! I cant realize why i don't find that way of hacking some projects ago... Great site by the way. Saludos desde Argentina!

29
ionz149February 1st 2009 @ 11:14PM

Many thanks for a great solution!

30
kat nevilleFebruary 20th 2009 @ 04:45PM

Hi there, thanks for posting this... but it doesn't solve the problem when you have a few sitting next to one another... It also doesn't work if you have your button on an image background, or if you want to centre it underneath something.

have you considered using the button tag instead? You can use the text indent for both ie6 and ie7 and it works in firefox as well.

I use

<button class="skinName" type="submit">text here instead of alt</button>

A few important points on this... You HAVE to put the closing button tag in full. Doing a self closing tag on a button makes it not work in ie7/ie6. You don't have to put any text in between the open and close, but it's nice to have it there as alt text.

Hope that's useful!

31
BinyaminMarch 9th 2009 @ 09:55AM

Interesting, but how did you make your 3d button for the search box??

32
MartinMarch 30th 2009 @ 07:13AM

Oh man Cross-Browsers are killing me. Now when IE8 is out I have to do all the hacks from IE6-IE8, yes I know IE6 is still kicking, however most of my clients don't want to upgrade and it has to be perfect on their browser first.

Thank You for great info,
Martin

33
SteffenRApril 21st 2009 @ 01:08PM

another hack to fight against IE6/IE7 is shown here:
http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit...
in Addition to your css you have to add the following lines

.class_input {
...
font-size: 0px;
display:block;
line-height: 0px;
...
}

#IEroot is no longer needed..

34
MizzincJuly 21st 2009 @ 02:00AM

Sweeeeeet piece of CSS.

Thank you.

35
GuestJuly 23rd 2009 @ 12:17AM

dooodes

you don't need hack to hide the text :-((( what the hell

-> input type = "button or submit" id="(your styling id)" value=" Leave empty here" <-

simple solution :-|

add the css part to the button and there won't be no text stuff :-|

36
Sun LocationJuly 23rd 2009 @ 01:29AM

THanks for this css example :)

37
janamillsJuly 27th 2009 @ 03:37AM

thanks for this just what i was looking for!

38
krizalisAugust 11th 2009 @ 06:30AM

Hi,

I think you could use this solution as well:

width:24px;
height:24px;
border: none;
background: transparent url(images/mag_glass.jpg) no-repeat center;
overflow: hidden;
text-indent: -999px;
font-size: 0px;
display:block;
line-height: 0px;

39
MarcusSeptember 4th 2009 @ 03:54PM

Thank you so much!!! This has helped me tremendously! Great tric.. i mean hack

40
Steven iphone HamburgOctober 9th 2009 @ 12:39AM

Thanks dude! This trick helped me alot for IE 7 :) THAAANKS!

41
RandomNovember 11th 2009 @ 01:05PM

I'm having just a minor issue, when I click over the search button a dotted border appears over the center of the button. I've tried with outline:none; but it doesn't work.

Regards.

42
JamesDecember 9th 2009 @ 01:35AM

I haven't tested this thoroughly, but using text-indent: -999px; line-height: 100em; seems to work just fine on all browsers. Line-height would almost suffice, but Firefox doesn't like it so you toss in the negative text-indent.

Cheers.

43
GuestMarch 11th 2010 @ 11:26AM

Or you just remove the Value by using a single line of jquery in your scripts.js:

$(document).ready(function() {

$(".form-submit").val("");

});
works for all Browsers, no text-indent etc needed.
regards

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

17 + 3 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.