PDA

View Full Version : [CSS] styling a search box



hernantz
Jan 28th, 2010, 07:46 PM
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:
http://img709.imageshack.us/img709/9374/searchboxk.gif (http://img709.imageshack.us/i/searchboxk.gif/)
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
Jan 28th, 2010, 08:11 PM
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
Jan 29th, 2010, 01:05 AM
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?

<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
Jan 29th, 2010, 01:04 PM
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
Jan 29th, 2010, 06:50 PM
use a then add javascript function to submit the form

hernantz
Jan 30th, 2010, 07:00 PM
You could use firebug in FF to inspect their page and learn the trick!

THanks for the tip :D

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
Jan 31st, 2010, 12:52 PM
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
Jan 31st, 2010, 01:29 PM
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
Jan 31st, 2010, 05:03 PM
#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 :rolleyes:


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?