customizing drop downs and search box look

[aprilmarie]

hello!

i'm trying to customize the look of my search box and drop down menus.

the search box i'm using is the sidebar one. i have found where to adjust the text in it. what i'm trying to do is work with the css to give it a different look. i want the resulting search box to be one lone rectangle with my square button image at the end, and the whole rectangle (field and button preferably) to have the background image of my choice. i would prefer that it not have the current shading but can live with it if it does.

i have done some web searching as well to try to figure this out. i added a part to my stylesheet to try to make the background image but it does nothing:

input.text {
background-image: url(../images/image.gif) no-repeat left bottom;
}

i found how to change the width of the button but i cannot figure out how to replace it with my image. i'm guessing removing the break would put them together once i do. i tried tinkering with the php but just ended up messing it up and having to go back to how it was.


on the drop down menu, basically i want to style a general version. this is not a top bar css drop down, i'm just meaning the drop down for currency, sort by, and choosing attributes types of things. i'd like to have it be a rectangle of my chosen image as the background, and then my chosen image as the button on the side. i'll also want to give it an outline, probably, to differentiate it from the main wrapper background. i'm really not sure how to get started on this one, everything i've found by searching talks about drop down menu add-ons for the top bar, etc. this is just styling the drop downs that are already in things.

for clarification, my shop is at aprilmariemai.com

thanks so much for any help!


i'm using the current zen cart version.
i have no addons.
i have customized my shop's look through css and some html and a little php tweaking.
i have looked in the faq area and searched the forums to try to find the solutions but could not find what i was looking for.
my store is live and functional, this is just working on my own template.

[jackie.taferner]

To identify what CSS classes the search box uses, Firebug is a great tool. Available in both Firefox and Chrome (which also have built-in code inspectors).

Your CSS syntax is incorrect, try this:

input[type=text] {
background-image: url(../images/image.gif) no-repeat left bottom;
}

The search button is located in:
/includes/templates/YOUR_TEMPLATE/buttons/english/

To style dropdowns you can use the following:

select {
background-image: url();
}

[aprilmarie]

thank you!

that didn't work for me, but i was able to adjust things and make it look a way i am happy with. i couldn't find how to customize the drop down arrow but a web search on it resulted in lots of things saying that it's not possible, and one would have to use javascript to do it. so i'll just leave them alone.

thanks!

[jackie.taferner]

ah, yes. The dropdown arrow you cannot change. But the background you can. Glad you were able to find a solution you were happy with!