[CSS] styling a search box

[hernantz]

HI all

1. I have an image as a submit button. Is it posible to change it to only text styled with css, as its only text, i dont see the need of an image for this.

2. Is it posible to change the SearchBoxMain border ( border: 2px solid #CCCCCC; ) to another color when the user is typing on the search box?

The idea is to have something like the bing search box www.bing.com

preview image:

THanks in advance

HTML code:

     <div id="SearchBoxMain">
      <form method="POST" action="search.php">
        <input type="text" name="keyword" size="38" id="s" />
        <input type="hidden" name="type" value="audio" />
        &nbsp;&nbsp;&nbsp;
        <input type="image" src="images/search.gif" value="Search" name="B2" id="go"/>
      </form>
     </div>

Respective CSS:

#SearchBoxMain {
	float: left;
	width: 350px;
	height: 28px;
	margin-left: 20px;
	border: 2px solid #CCCCCC;
}
#s {
	float: left;
	height: 21px;
	border: none;
	margin: 3px;
}
#go {
	margin: 8px 4px 0 0;
	float: right;
}

[Excavator]

Hello hernantz,
Did you try removing the image?

 <form method="POST" action="search.php">
        <input name="keyword" size="38" id="s" type="text">
        <input name="type" value="audio" type="hidden">
        &nbsp;&nbsp;&nbsp;
        <input value="Search" name="B2" id="go" type="image">
      </form>       
     </div>

Not sure about your second issue...

[hernantz]

Thanks for answering.
That woks if i dont link this to an image. I could leave like that but...how to do it well? i mean, what input tag should i use?

PHP Code:

<input type="image" value="Search" name="B2" id="go" /> 


The text decoration did not applied, dont know why

#go {
	align: right;
	text-decoration: bold 15px #CCCCCC;
}

About my second issue, maybe with a :focus on searchboxmain, what do you think?

[abduraooft]

1. I have an image as a submit button. Is it posible to change it to only text styled with css, as its only text, i dont see the need of an image for this.

2. Is it posible to change the SearchBoxMain border ( border: 2px solid #CCCCCC; ) to another color when the user is typing on the search box?

The idea is to have something like the bing search box www.bing.com

You could use firebug in FF to inspect their page and learn the trick!

[brightyoursite]

use a then add javascript function to submit the form

[hernantz]

Originally Posted by abduraooft

You could use firebug in FF to inspect their page and learn the trick!

THanks for the tip

ok i finally used a button tag for this, and is working perfect. Now, to change the border of the SearchBoxMain div while typing in the search box ill see if i can use an html event like onfocus

[abduraooft]

Now, to change the border of the SearchBoxMain div while typing in the search box ill see if i can use an html event like onfocus

#s:focus{
/* all new style goes here*/
}

(Not supported by IE6 though)

[VIPStephan]

Originally Posted by brightyoursite

use a then add javascript function to submit the form

And what happens if JS isn’t available/supported? (and yes, there are such cases!)

[hernantz]

Originally Posted by abduraooft

#s:focus{
/* all new style goes here*/
}

(Not supported by IE6 though)

ok but i wanted the SearchBoxMain div to change, i think ist only posible with js, dont know with html5

Originally Posted by VIPStephan

And what happens if JS isn’t available/supported? (and yes, there are such cases!)

Yeah, im trying to prioritize html + css, is it possible to make a dinamic site without js?