If this is what you are looking for... (see search form on right side of page here: http://cvblog.companyv.com)
You can do it with a background image: Here is the image I used: http://cvblog.companyv.com/wp-content/themes/cvblog/images/searchbox.png The form: <form method="get" id="searchform" action=""> <input value="Search our site..." name="s" id="searchbox" onfocus="if (this.value == 'Search our site...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search our site...';}" type="text"> <input id="searchbutton" value="" type="submit"> </form> The CSS: This is the entire area: #searchform { background:url("images/searchbox.png") no-repeat scroll left 0 transparent; height:31px; margin:auto; width:242px; } This makes the internal box space #searchbox { background:none repeat scroll 0 0 transparent; border:medium none; color:#000000; font-size:11px; margin-bottom:3px; margin-left:15px; margin-top:8px; width:180px; } This defines the click space: #searchbutton { background:none repeat scroll 0 0 transparent; border:medium none; margin-bottom:12px; margin-left:10px; width:30px; } Hope that helps! On Jun 9, 9:42 pm, blix <[email protected]> wrote: > Hi all, > > I haven't done this before but what would be the right way to code a > custom search box with a designed background? Or a designed search box > if you like? > > Thank you all for replies. > > Ev -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
