Removing a focus color in Chrome

Question

I have a colour that appears on my input and textarea fields when they are focused:

enter image description here

This seems to happen in Chrome, but not Firefox.

I have tried to change the color with a bit of jQuery:

if ($('body').is('#contact')) {
        $('input').focus(function() {
            $(this).css('border', '2px solid #ce1443');
            console.log('focus');
        });

         $('textarea').focus(function() {
            $('textarea').css('border', '2px solid #ce1443');
        });
    }

However, this appears to only make the current border bigger...but it does nothing to get rid of the blue colour.

May be a duplicate of http://stackoverflow.com/questions/2943548/chrome-inputtype-textfocus-border — Adriano Repetti, Mar 14 '12 at 20:47

score 7 · Accepted Answer · answered Mar 14 '12 at 20:46

7

Use the outline: none CSS property: http://jsfiddle.net/ZnefN/.

answered Mar 14 '12 at 20:46

pimvdb

151,816
78
307
352

Hm...that seems to work in Chrome...but then I see the outline in firefox? – redconservatory Mar 14 '12 at 20:51
Wait...that's just jsfiddle adding the outline I think – redconservatory Mar 14 '12 at 20:57

score 5 · Answer 2 · edited May 23 '17 at 12:24

5

try in css:

input:focus {
    outline: none;
}

and to get all input and text areas and select boxes

input:focus, select:focus, textarea:focus {
    outline: none;
}

Also, I think this might be redundant to this question

edited May 23 '17 at 12:24

Community

1
1

answered Mar 14 '12 at 20:46

SpYk3HH

22,272
11
70
81

I think setting the outline-width: 0 helped too. – redconservatory Mar 14 '12 at 20:54
Quite possibly could help in chrome, though i think IE views `outline-width` as a different kind of property and may hide borders or text-shadowing as well. I could be wrong, I don't test with IE unless the boss makes me, but just a thought. – SpYk3HH Mar 14 '12 at 21:04

score 2 · Answer 3 · answered Mar 14 '12 at 20:46

2

It's something you can fix through CSS:

input:focus {
  outline: 0 none;
}

answered Mar 14 '12 at 20:46

Steve

8,609
6
40
54

Removing a focus color in Chrome

3 Answers3