Borderless search boxes under HTML/CSS

**mollipen** · 09 Oct 2005, 02:20 AM

Originally Posted by NightWolve

EDIT: Oops, you already answered my question actually. Yeah, then there should be no problem with this code.

Safari is STILL making it's own specialized searchbox. *grr* Here's what I'm seeing. Yes, I check out Apple's website in Safar, and it looks perfectly fine. I copied your code over, and just changed the actual action to fit what my board needs.

What. The. Hell.

So, basically, I need to find the magic key that will render a search box totally borderless in ALL browsers. If I can find that, I can get this plan to work. If I can find no other solution, could I possibly use Javascript to output one style of coding to Safari, and another to everything else?

By the way - the new skin I'm working on is being made with no regard for IE, so I don't need to worry about it. IE won't do many of the things I'm doing, at all or without a lot of extra work, so IE user simply won't be able to use this new skin. I don't care anymore.

**NightWolve** · 09 Oct 2005, 07:28 AM

Oh, heh. Set type=text and test it with my original code again. That works here fine for me.

Too bad it's not a cross platform browser. I'm curious as to how they disable it from using the fancy Mac look so I would've like to have tested it here. Anyway, you don't need it as type=search really when you have a submit button and want the Enter key to submit the form.

Originally Posted by shidoshi

If I can find no other solution, could I possibly use Javascript to output one style of coding to Safari, and another to everything else?

Yeah, I'll leave you with that method also.

Code:

<scrip.t>
function init() {
	var agent   = navigator.userAgent.toLowerCase();
	var isSafari = (agent.indexOf('safari') != -1);
	if ( isSafari ) {
		var IdSearch = document.getElementById('searchbox');
		IdSearch.outerHTML = "<input class='sbox' id='searchbox' onclick=\"if(this.value=='Search iTunes Music Store')this.value='';\" type=\"text\" value='Search iTunes Music Store' name='term' results=5 size=20>"
	}
}
</scrip.t>
</head>
<body onload="init()">

That'd let you change the whole input tag to whatever new HTML you wanted if Safari's detected. You'd add that code and also add 'id="searchbox"' to the INPUT tag. The other simpler, less fancier way would be like this:

Code:

<scrip.t>
	var agent   = navigator.userAgent.toLowerCase();
	var isSafari = (agent.indexOf('safari') != -1);
	document.write('<input class="sbox" onclick="if(this.value==\'Search iTunes Music Store\')this.value=\'\';"', isSafari ? 'type="text"' : 'type="search"', 'value="Search iTunes" name="term" results="5" size="20">')
</scrip.t>

Right where you have the INPUT tag, you'd replace it with this script block inbetween your HTML. So, you get the idea. Still, I really don't think you should have to go that far for this, but there you go.

Thread: Borderless search boxes under HTML/CSS

Thread Tools

Bookmarks

Bookmarks

Posting Permissions