Remove input focus on Google Chrome

Question

I am working with Firefox and Google Chrome.

On Firefox I have no problems and the focus color is blue.

firefox focus

On Chrome the focus is blue + orange.

chrome focus

How do I remove the orange? It comes as a default input focus in Chrome.

.input {
  border: 1px solid #dbdbdb;
  padding: 0 5px 0 5px;
  height: 26px;
  width: 200px;
  border-radius: 3px;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 13px;
}

.input:focus {
  border: 1px solid rgba(51, 153, 255, 0.4);
  box-shadow: 0 0 5px rgba(51, 153, 255, 0.4);
}

<td><input type="text" name="user_login" class="input" autocomplete="off"></td>

score 29 · Answer 1 · edited May 23 '17 at 12:33

29

You should be able to remove it with

outline: none

Here is an updated fiddle: http://jsfiddle.net/cvv5h/1/

Check this out: How to reset / remove chrome's input highlighting / focus border?

edited May 23 '17 at 12:33

Community

1
1

answered Apr 13 '13 at 14:42

Jason Gennaro

34,535
8
65
86

2

If your using bootstrap you'll also need to do box-shadow:none; – davidcondrey Sep 11 '14 at 00:14
8

Doesn't work for me in Chrome 40.0.2214.115; I still get the blue outline – dlchambers Mar 02 '15 at 21:12

Remove input focus on Google Chrome

1 Answers1