Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / How can I make an input box have a color rather then being plain?

How can I make an input box have a color rather then being plain?

Locked

Views: 1,111

Results 1 to 4 of 4
This thread is locked. New replies are disabled.
4 Aug 2009, 10:03 AM
#1
tinkerdesign avatar

tinkerdesign

New Zenner

Join Date:
Jul 2009
Posts:
26
Plugin Contributions:
0

How can I make an input box have a color rather then being plain?

My site is not yet online, developing it locally...
I would like to customise the search on the left side, like in : http://osc.template-help.com/zencart_24185/index.php

I see they use a seperate stylesheet (stylesheet_boxes.css)

Where would I assign that class to the search box?

Thank you

and would css buttons need to be on or off in my layout settings?

4 Aug 2009, 3:00 PM
#2
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: How can I make an input box have a color rather then being plain?

It can be styled in the same way as any other element.

It will be an <input> tag. To specify just that <input> tag you need its ID or a class, or the ID of a containing element.

Start with:

#searchContent input{background-color:red;}

You'll discover that this alters the input box and the button ( they are both <input>) To separate them out you are going to need to either 1. play around with the first-child selector in the css but this is buggy across browsers in my opinion. 2. Edit the code to add a ID or a class to one or both elements.

Or you could try this:

#searchContent input[type=text]{background-color:red;}

But I think this is buggy across browsers too so I would really recommend adding IDs or classes to the elements.

4 Aug 2009, 3:08 PM
#3
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: How can I make an input box have a color rather then being plain?

I have been to the dentist so am feeling a bit slow!

With css buttons enabled you may have more lock at separating the elements.

CSS buttons adds a class to the buttons so you can use that to discriminate between the button and the text input.

#searchContent input{background-color:red;}
.button_search{background-color:green !important;}
10 Aug 2009, 2:01 PM
#4
tinkerdesign avatar

tinkerdesign

New Zenner

Join Date:
Jul 2009
Posts:
26
Plugin Contributions:
0

Re: How can I make an input box have a color rather then being plain?

Thank you so much!!