Disable input shadow CSS / HTML

Question

When I click inside of an input box, I see the following "shadow":

Can this be disabled? If so, how?

EDIT:

And this is my code

<div class="col-xs-12"><input class="form-control" id="Password" name="Password" type="text" placeholder="Password" /></div>

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Jul 07 '16 at 16:14
Possible duplicate of [How to remove the border highlight on an input text element](http://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element) — Angel Politis, Jul 07 '16 at 16:33

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

1

I think you want to set 'outline: none' on the input css.

edited May 23 '17 at 12:24

Community

answered Jul 07 '16 at 16:13

he8us

If this is a duplicate, you should flag the question as a duplicate since you have enough reputation now. – Lexi Jul 07 '16 at 18:04
Thanks, at that moment I hasn't, now I have. – he8us Jul 08 '16 at 08:15

score 1 · Answer 2 · answered Jul 07 '16 at 16:16

1

Set border to none or 0. Then for mozilla remove ghost padding.

.myInput {
    border: 0;
}
.myInput::-moz-focus-inner {
    border: 0;
    padding: 0;
}

answered Jul 07 '16 at 16:16

mhatch

Did you try this CSS? It is also cross-browser compatible. – mhatch Jul 13 '16 at 19:45

score 1 · Answer 3 · edited May 23 '17 at 11:45

1

From the styling, it looks like you're using iOS. Check out this thread Remove iOs input shadow. It's a couple years old, but it might help.

edited May 23 '17 at 11:45

Community

answered Jul 07 '16 at 16:19

John Beckius

1

You should provide the general idea of the thread you mention in case the site/thread goes down, especially if it's old. If it does go down, this answer won't be useful. – PhilDulac Jul 07 '16 at 16:29
1

Thanks for the advice. Will do so in the future. – John Beckius Jul 07 '16 at 17:21

score 1 · Answer 4 · answered Jul 12 '16 at 07:53

1

I just put

border:none;

And worked, that blue border desapeared

answered Jul 12 '16 at 07:53

kaskull

If you found the solution, you should consider marking a post as the answer if it helped you. (i.e. the green checkmark) – mhatch Jul 13 '16 at 19:44

score 0 · Answer 5 · answered Jul 07 '16 at 16:36

0

Em maybe you can try to using outline:none,it will kill the the border when user click the input box

answered Jul 07 '16 at 16:36

Felix Fong

5 Answers5