how to remove textbox highlight action

[Skier88]

Some browsers, like Chrome and Safari, put an extra border around a textbox when it is highlighted. You could see this effect at www.google.com. What I want to do is get rid of it. I know it can be done, as I have seen several sites that accomplish this, like this one's search box: <snip>

But even looking at the source I can't figure out how. My best guess is masking it with an image, but that would require 4 images to still have access to the textbox, which the example linked does not do.

Any help?

[edited by: swa66 at 9:56 am (utc) on Aug. 29, 2009]
[edit reason] No URLs, pleas esee ToS and Forum Charter [/edit]

[swa66]

Try styling the :target pseudo class.

[Skier88]

Thanks, but no luck. I tried setting the border of the applicable :target, as well as of the applicable :focus and :active. They work to change the border, but this second border is there around the textbox's border.

[alt131]

Hi Skier88,
I think what you want is dynamic outlines [w3.org] rather than border. The Css3 draft adds some new values [w3.org]. To remove:

textarea {outline:none}

However outline is important for usability and accessibility, so I'd urge you to think carefully before removing it. An alternative is to style the outline to suit the site design (recalling it should still provide some contrast).

This test sheet might help. It is dreadful to look at, but setting a border and using the css3 outline-offset makes it easier to see how outline works.

textarea {border:10px solid green; outline-offset:1px;}
textarea:hover {outline: 10px solid blue;} /*colour on mouse hover */
textarea:focus {outline: 10px solid black;} /*colour when gains focus by tabbing, or while typing */
textarea:active {outline: 10px solid red;} /*colour while mouse depressed */

Note: Op9 will not redraw :hover and :focus correctly, ie<8 does not understand, and ie8 does not recognise css3 outline-offset - useful to keep in mind when designing. Plus, although it seems more natural to please the :hover rule after :focus, doing so may override the :focus colour if a user clicks and begins typing without pushing the mouse out of the textarea

[edit]grammar![/edit]

[Skier88]

alt131, you are my man! Works perfectly. My intended use is for a search box, which will be adequately indicated by a js disappearing watermark and the standard cursor, so I don't think it will be a problem. But with the controls you've just given me I might have to play around a bit :) But that brings me to an unrelated question that you might be able to answer too - how do you apply css to a certain type? eg, only inputs with "type='text'".

[swa66]

how do you apply css to a certain type? eg, only inputs with "type='text'".

CSS2.1 provides for matching attributes in selectors:
[w3.org...]

So you could do

input[type="text"] {
 /* style goes here */
}

It won't work in legacy IE versions such as IE6 without help from e.g. javascript solutions such as IE7.js [ie7-js.googlecode.com]

[alt131]

Pleased to help ;) Several thoughts:

1
A "fading watermark" sounds really interesting ;) However, given my usability/accessibility approach, please check the inputs are still obvious when users have javascript disabled.

2
Follow the above link to check out attribute selectors. As your goal is to turn outline "off" in the couple of modern browsers that display it by default, there is no issue with legacy versions of ie (or any other ua) that don't understand attribute selectors. More specifically:

• ie6 doesn't understand attribute selectors BUT it doesn't understand outline so doesn't display one by default - there is nothing to "turn off". An attribute selector used to turn the outline off (for example, in safari) will be ignored.
  
• ie7 understands attribute selectors, BUT (like ie6) doesn't understand outline or display one, so (like ie6) there is nothing to "turn off" and the selector will be ignored.
  
• Op9+, ff and ie8 understand the attribute selector AND outline. No problem (Although they don't display outline by default so outline:none is a bit redundant - but causes no troubles)
  
• Chrome and safari understand attribute selectors AND outline AND display it by default. An attribute selector can be used to set the default display to none (turn outline "off")

In the end it all means the attribute selector allows you to target specific types of inputs to "turn off" the outline in the browsers that display it by default, without creating problems in the other named browsers.

3
For the above reasons, no need to use ie7/8.js to force understanding of the attribute selector - your goal is no outline and ie6&7 don't display one, so they are already doing what you want. Also, ie7/8.js doesn't make those browsers display an outline, and without an outline, there is nothing for the attribute selector to apply to ("turn off").
(.... if that makes sense)

[Skier88]

swa66, thank you, the selectors work great. I'm glad to see such a broad solution - I can see it cleaning up my code quite a bit.

alt131, thanks for your advice, but it really isn't an issue. It's more of a cosmetic change to a common text box - rounded corners, etc. Turning off javascript would only annoy the user by keeping "search" in the box after clicking, but it wouldn't impact the appearance before clicking. Although I have to admit, my site would be pretty broke right now without javascript, what with js-powered hover effects, suggestions, and the watermark.

And thanks for the advice regarding outlines in older browsers.

I do have another question though - although IE will run my scripts, it requires express permission from the client first. ie, a yellow box at the top warning about ActiveX controls that might harm the computer. I don't have the word "activex" anywhere in my code... what is triggering this? (I can provide my code if there is no generic solution)

Again, thanks to both of you.