Clearing Safari's Form styling (Blue Glow)

[Siebird]

Anyone know how to clear Safari's default form input styling? I want to get rid of the blue glow on focus. I have a custom search bar on my site, and safari is the only browser that keeps the default styling.

[felgall]

Most browsers have a configuration option for turning off any form field styling so that all the forms you visit look the same. Maybe you have that optionn turned on in that browser.

[Siebird]

I don't want the user to have to turn off their browser default. I want to do it with CSS or JS, so its consistent across all browsers.

[felgall]

If their option is set to not allow you to change the way forms look in their browser then you can't change the way forms look in their browser.

[richtestani]

I think thats a OS X interface styling, and not a browser CSS style.
I think most OS X apps that have a form to fill in has a blue outline.

[markbrown4]

Safari lets you do near nothing to form styling with CSS:
http://www.456bereastreet.com/archiv...form_controls/

I actually quite like the idea - too often people abuse the styling of form elements and make them unusable.

[Siebird]

I actually quite like the idea - too often people abuse the styling of form elements and make them unusable.

I do too, but for what I want to do, I would like to get rid of it...or else use another technique? But I am not aware of any???

Here is an example, take a look using FF/IE

[markbrown4]

Ahh, Paul has done something very similar that search box before, i'm not sure if it degraded nicely in Safari or not, maybe he will pop in and explain his solution.

[Siebird]

Ahh, Paul has done something very similar that search box before, i'm not sure if it degraded nicely in Safari or not, maybe he will pop in and explain his solution.

Where's Paul when we need him!?

[abilstein]

Try this in your style sheet:

:focus {
outline: 0;
}

That will also disable focus outlining in other browsers (like links in FF) and can reduce accessibility. However, you can use additional selectors to strictly target form elements with the 'outline' property.

[Siebird]

I tried the :focus styling, and had no success. I need to get rid of the default input field in Safari by stripping it completely. Safari is the only browser not displaying the search bar correctly.

[abilstein]

Maybe you could post some code as an example? I tried the demo page that you linked to, and :focus { outline: 0; } worked for me. Are you defining outline anywhere else?

[Siebird]

Are you defining outline anywhere else?

Nope, all my styling for the search bar is in my globalnav.css and I'll post below. Make sure you check in Safari as that is the only browser that I am having issues with.

/* GLOBAL SEARCH */
#globalsearch { 
	margin: 0;
	padding: 0;
	width: 248px; 
	height: 25px; 
	position: relative; 
	float: right; 
	background: url(../layout/searchfield-capleft.jpg) top left no-repeat; 
}
 
#clearsearch {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	width: 0px;
	height: 0px;
	text-indent: -9000px;
}
 
#fancysearch {
	margin: 0 0 0 29px;
	padding: 6px 0 0 0;
	float: left;
	font-size: .6em;
	position: relative;
	width: 196px;
	height: 25px;
	/*left: -23px;*/
	border: 0;
	background: url(../layout/searchfield-label-bg.gif) repeat-x;
}
 
#fancycap {
	position: relative;
	float: right;
	margin: 0;
	padding: 0;
	width: 23px;
	height: 25px;
	background: url(../layout/searchfield-capright.jpg) right no-repeat; 
}
 
:focus {
outline: 0;
}

<div id="globalsearch">
				<form action="#" method="POST">
					<label><span id="clearsearch">Search:</span><input type="text" id="fancysearch" name="q" accesskey="s"></label><span id="fancycap">&nbsp;</span>
				</form>
			</div>

[brothercake]

Safari is the only browser not displaying the search bar correctly.

Or depending how you look at it, Safari is the only browser that is displaying the search bar correctly

[abilstein]

What platform/version of Safari? I tested in Safari 3 Beta on Windows and OS X.

If you create a page with *only* the code you posted above, do you see the blue glow? I do not. If I then remove the :focus selector, the blue glow returns.

[Siebird]

I'm testing in OS X 10.4.10 with Safari 2.0.4 When you test with just the code, does it look like it does in FF or IE? or do you still get the default form field that breaks the styling?