Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 791
  • Last Modified:

Safari rendering of text input box

I have a simple

                 <input id="zoom_query" type="text" name="zoom_query">

box with a border-style:inset CSS style. The rendering in Firefox is fine (see images below)  but Safari shows a blue haze around it when the box has the focus and doesn't show any inset when the box does not have the focus.  I like the Firefox rendering better.  Does anyone know how I can coax Safari to render it the same way?

Thanks.

 text-input: Firefox text-input: Safari with focus text-input: Safari without focus
0
steva
Asked:
steva
  • 9
  • 3
1 Solution
 
askurat1Commented:
try setting:
border: none

Open in new window

0
 
askurat1Commented:
or
border: 0;

Open in new window

0
 
askurat1Commented:
If neither work try this:
input[type=text],
input[type=text]:hover,
input[type=text]:focus,
input[type=text]:active
{
    border: 0;
    outline: none;
    outline-offset: 0;
}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
stevaAuthor Commented:
Askurat1,

Thanks for the suggestions, but none of those worked.  They all remove the border, but there has to be a border of some kind or it's just a hole in the background.  And recently we've changed the background to white, so removing the border makes the field disappear completely.
0
 
askurat1Commented:
Cold you maybe give me a link to an example?
0
 
askurat1Commented:
Try:
input[type=text],
input[type=text]:hover,
input[type=text]:focus,
input[type=text]:active
{
    outline: none;
}

Open in new window

0
 
stevaAuthor Commented:
askurat1,

You can see the box at http://www.steveswebshopphp.com/upaya/ in the upper right corner.  Again, I just want it to render in Safari as it does in Firefox, with an inset effect that doesn't become blue when you select it.
0
 
askurat1Commented:
If you want an inset border have tried:
border-style:inset;

Open in new window

0
 
askurat1Commented:
My fault I didn't see you put that. Try adding:
border-color: white;
Inside of:
 input#zoom_query,
 input#zoom_query:hover,
 input#zoom_query:focus,
 input#zoom_query:active
 {
}

Open in new window

0
 
askurat1Commented:
Or you can change the color to something slightly darker than white to achieve more of the pop out effect.
0
 
stevaAuthor Commented:
askurat1,

I notice that IE and Chrome render it the same way Safari does, so maybe Firefox is the oddball.

I'll give you the points now for all your effort and suggestions, and I'll come back to it later, when I'm not putting out other fires, and play with it more.

Thanks for your help.

0
 
askurat1Commented:
Yea unfortunately when it comes to text boxes they seem to render differently throughout all browsers. Thanks for the points.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 9
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now