remove the border when focusing on an input box

Question

There are other things on SO regarding this, but none of the solutions seem to work.

I'm trying to get rid of the light blue border that Google Chrome puts around any input box. My code:

#alphatxt:focus {
    border: 0;
    outline:none;
}

It works on buttons but doesn't on any input field It still doesn't remove the border, I've tried multiple different techniques that have been recommended but still no joy.

Can this be done?

Thanks

see this link http://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome — Frebin Francis, Jan 12 '16 at 13:14
[Here is your code](https://jsfiddle.net/67nhhrzv/). It works for me... — Ahs N, Jan 12 '16 at 13:16

score 1 · Answer 1 · answered Jan 12 '16 at 13:16

1

You can try this it will work

#alphatxt:focus {
 outline: none; // removes blue outline on focus
 border: 0;  // removes border
 box-shadow: none; // removes shadow (for bootstrap etc )
}

answered Jan 12 '16 at 13:16

nmanikiran

2,866
15
19

score 0 · Answer 2 · answered Jan 12 '16 at 13:16

0

Try doing

input:focus,
#alphatxt:focus {
    outline: 0;
}

However I wouldn't recommend removing it as the outline is used for people who don't have a mouse so they can use 'tab' and also the visually impaired. http://www.outlinenone.com/

answered Jan 12 '16 at 13:16

James Nixon

317
4
13

score 0 · Answer 3 · answered Jan 12 '16 at 13:16

0

You need to override the outline property, a browser default:

https://jsfiddle.net/hv8s8ygn/

input:focus {
  outline: none;
}

answered Jan 12 '16 at 13:16

David Wilkinson

5,060
1
18
32

score 0 · Answer 4 · answered Jan 12 '16 at 13:17

0

Put below css in you css file

input[type="text"]:focus, textarea:focus 
{
  border: none !important;
  outline: 0 none;
}

answered Jan 12 '16 at 13:17

Dhaval Patel

1,076
6
19

I don't know about the "outline" definition (sometimes it works for me and sometimes it doesn't), but as for the "border" definition - that's a very bad idea to do that for ALL the text (and textarea) fields, because regardless to Chrome, focusing on these fields will hide their border alltogether, even if it's a regular border that we wish to have in these fields... – TheCuBeMan Jul 05 '16 at 14:44

remove the border when focusing on an input box

4 Answers4