SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clearing Safari's Form styling (Blue Glow)

    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.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.

  7. #7
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    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

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.

  9. #9
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    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!?

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Austin
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Austin
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  13. #13
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abilstein View Post
    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.

    Code CSS:
    /* 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;
    }
    Code HTML4Strict:
    <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>

  14. #14
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by asiewe61 View Post
    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

  15. #15
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Austin
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •