Design a search form with css my purpose is to have searchform text like arte
-
Hello
on http://olivierbaudrydesign.free.fr/?page_id=9/
I decided to design a search form on my website
the first searchform is this :you can see it on http://olivierbaudrydesign.free.fr/?page_id=29/ <div id="search"> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get" name="searchform" id="searchform"> <input type="text" name="s" id="s" value="Rechercher" /> <input type="image" alt="submit" src="/wp-content/themes/oupocreanum/images/return.gif"/> </form> </div>
and the original css is this `#search {
position: absolute;
top: -24px;
right: -16px;
margin: 0px;
margin-top: 0px;
}#s {
width: 150px;
height: 17px;
background-image: url(/wp-content/themes/oupocreanum/images/loupe.gif);
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: grey;
border-right-color: grey;
border-bottom-color: grey;
border-left-color: grey;
vertical-align: text-bottom;
}#search label {
display: none;
}#search h2, #search form {
display: inline;
}`But i decided to modify code like this :
http://olivierbaudrydesign.free.fr/?page_id=9/ <div id="search"> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get" name="searchform" id="searchform" /> <input type="text" name="s" id="s" value="Rechercher" maxlength="255" style="" onClick="this.value='';"onblur="if(this.value=='') this.value='Rechercher';" onfocus="if(this.value=='Rechercher') this.value='';" /></div> <input type="image" alt="submit" src="/wp-content/themes/oupocreanum/images/return.gif" /> </form> </div>
But my purpose is to have two box one for searchform with picture on background and one for text But actually I don’t know,I search to have a separation between searchform background and searchform text like arte.tv search form
http://www.arte.tv/fr/70.html
Can you help me for making good scripting or good css to have a good effect on text position?
- The topic ‘Design a search form with css my purpose is to have searchform text like arte’ is closed to new replies.