Design + Coding > <input> CSS troubles

I need to change the submit button to an image and change the size of the search field. I looked at the html and I think the class of the input is 'queryField' and 'button queryButton' but when I add my own custom css nothing happens. Any help would be great! Thanks.

10.2.2008 | Registered CommenterSean Tycho

Hey Sean,
I had some issues with this too. Even in the "site recreation" videos, the one part that is always different is the submit button on the search field. I was able to mess with the search field, here is my css...
.form-body #username, .form-body #password { width:300px; }
Try using firebug to find the # for the search field (https://addons.mozilla.org/en-US/firefox/addon/1843)
Hope this helps,
~Ryan

10.3.2008 | Registered CommenterRyan McLeod

Hey everyone,

.search-form .queryButton { } /* this is the full search page button */
.search-form-pt .queryButton { } /* this is the widget search button */

Here is how you would make the search button an image...just add a background image to replace the default search button.

#sidebar1 .content-passthrough .search-form-pt .queryField { width: $(Sidebar1Width-110)$; }
#sidebar2 .content-passthrough .search-form-pt .queryField { width: $(Sidebar2Width-110)$; }

Here is how you would change the size of the search field.

Hope that helps.

10.3.2008 | Registered CommenterTyler Thompson

How would you change the ">>" to "search" ?

11.26.2008 | Registered CommenterPete Tschudy

i tried this but nothing doing. when speaking code can you translate into laymen? it would help out those that don't know what goes where.

thanks.

02.20.2009 | Registered Commenterabe

Why is this so difficult to accomplish? I tried the string above suggested by Tyler, but it doesn't work. How can that search button image be replaced with another icon?

06.14.2009 | Unregistered CommenterDee

One option is to change the text of the button, as I did here. You have to first load the jQuery JavaScript library in your header area, like this:

<script type="text/javascript" src="/storage/scripts/jquery-1.3.2.min.js">
</script>

... then follow that by a JavaScript function like this ...

<script type="text/javascript">
$(function(){
$('#moduleContent1234567 .search-form-pt .queryButtonWrapper input').attr({value:"Search »"});
});
</script>

...where the number 1234567 must be replaced by the appropriate number from the <div> that appears immediately before the search form in your page source. Search the source for "search-form" and you will see it a couple of lines above.

You may also have to adjust the CSS for the button, I'm not sure from memory.

06.14.2009 | Registered CommenterChris Loosley

Thank you, Chris, for the alternative. But I was really looking to get rid of that button altogether and just have it replaced. There surely must be a way to do this.

06.14.2009 | Unregistered CommenterDee

Yes there is, but it can be a bit tedious to get it 'just right'. If you want to play with it, you can read about the method here:

http://www.ampsoft.net/webdesign-l/image-button.html
http://www.demon-design.net/blog/tutorials/replacing-a-form-submit-button-by-an-image

And googling something like 'CSS replace button with image' will probably produce many more similar tutorials!
--Chris

06.14.2009 | Registered CommenterChris Loosley

Thanks again Chris.

I was able to get this working for me so I will post it here in case it may be helpful to someone else.

To get rid of the ugly gray search button and replace it with another icon:

For the sidebar:

.search-form-pt .queryButton { width:14px !important; padding:0; height:15px; background:url(/storage/images/yourimage.png); border:none; line-height:1px; font-size:1px !important; vertical-align:middle; cursor: pointer; }

For the search page:

.search-form .queryButton { width:15px !important; padding:0; height:15px; background:url(/storage/images/magnifier.png); border:none; line-height:1px; font-size:1px !important; vertical-align:middle; cursor: pointer; }

06.14.2009 | Unregistered CommenterDee

Chris,

I trying to get your JavaScript method to work but being new to this I'm not clear on where this code goes. Is it through a code injection point or through Custom CSS?

Thanks

11.6.2009 | Unregistered CommenterNolan Evans

Nolan,

Only CSS code goes in the Custom CSS file.
Most JavaScript scripts go in the page header code injection point.

--Chris

11.6.2009 | Registered CommenterChris Loosley

Thanks Chris,

I thought that would be the case. I've put the following code in the "Extra Header Code" injection point:

<script type="text/javascript" src="/storage/scripts/jquery-1.3.2.min.js">
</script>

<script type="text/javascript">
$(function(){
$('#moduleContent5140952 .search-form-pt .queryButtonWrapper input').attr({value:"OK"});
});
</script>

But it does not change the button on the search box. I have the search box in Sidebar 1 - would this be the problem?

11.6.2009 | Registered CommenterNolan Evans

Nolan,

That code looks correct. So:

Step 1. Forgive me if this is a dumb question, but did you first download the jQuery library and upload it to a scripts folder in your storage area? I see that I did not explain that in the post above. This aspect of jQuery has been described here in many previous threads. But if you have not read other discussions of jQuery, I can see how that aspect may not be obvious.

Step 2. If you did that, and it's still not working, the next thing to do is to debug the selector in the jQuery code. Put this in your Custom CSS file and see if it puts a red border around the button:

#moduleContent5140952 .search-form-pt .queryButtonWrapper input { border: 1px solid red; }

If it does not, then there is something wrong with the selector in the script.
--Chris

11.6.2009 | Registered CommenterChris Loosley

...........

Oops - yeah - I guess if I am going to call a library I will have to actually put it there to call.............

Thanks so much! It works perfectly now.

11.6.2009 | Registered CommenterNolan Evans