Skip to content

Instantly share code, notes, and snippets.

@juliuscsurgo
Created January 3, 2013 01:29
Show Gist options
  • Star 24 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save juliuscsurgo/4440047 to your computer and use it in GitHub Desktop.
Save juliuscsurgo/4440047 to your computer and use it in GitHub Desktop.
Twitter Bootstrap: remove the blue glow in the form inputs
input[type="text"], textarea {
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
@Mandlaness
Copy link

Worked like a charm for me. Thank you

@Jamilammar
Copy link

Thank you!

@ryandwi
Copy link

ryandwi commented Apr 28, 2015

ok, thanks bro :)

@neywen
Copy link

neywen commented May 19, 2015

pffffiiiou I've been trying 2784 different solutions from stackoverflow, without any success, and that's the only solution that fully and properly worked. Many thanks...

@daniel-halldorsson
Copy link

make sure not to include line 4 if you want validation states on your inputs (red for error, green for success etc)

@tasnim101
Copy link

Thanks man :-D

@bigblocho5
Copy link

bigblocho5 commented May 13, 2016

Thank you!

@nodox
Copy link

nodox commented Jun 24, 2016

Thank you! So helpful!

@saoron
Copy link

saoron commented Jun 27, 2016

Thanks!

@3ssom
Copy link

3ssom commented Oct 7, 2016

Thanks!

but what about other types? I know I'd have to also put other types like this:

input[type='text'],
input[type='number'],
input[type='password'],
textarea {
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}

but what about fields like body? which is not working with it?

Thank you again

Copy link

ghost commented Sep 4, 2017

thanks

@yoni-g
Copy link

yoni-g commented Jan 9, 2018

Thanks man..

@nikki7788
Copy link

Thanks!
It worked.

@jeeohly
Copy link

jeeohly commented Jul 30, 2018

THANK YOU

@VikramThory
Copy link

Thanks! It worked pretty fine.

@edgarMejia
Copy link

¡Gracias! :)

@thewilliamchan
Copy link

Thanks! It works perfectly!

@vedhaperi
Copy link

Thank you!

@omer2500
Copy link

thank you!

@theAmazingJiang
Copy link

Thx

@waska11
Copy link

waska11 commented Jul 5, 2019

Hello Folks,

I have seen many articles and tricks on multiple websites to get rid of this blue thing which comes on click as :focus,
Here is the way: If you are using bootstrap locally not a CDN then you can head to the bootstrap.css and if you are using .min file then bootstrap.min.css, search "box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);" and replace it with "box-shadow: none!important;" so this will delete all the focus at once, you can use sublime or Atom editor to replace at once.

@BahramIsmayilov
Copy link

thanks

@tranduclinh2067
Copy link

Thank you!

@l33t-daniel
Copy link

Good!

@ChiragDhussa
Copy link

It worked. Thanks.

@LoffeKoffe
Copy link

Saved my day :D

@AlvexGR
Copy link

AlvexGR commented Dec 10, 2019

Thank you!

@Alirezamxz
Copy link

Thank you!

@seanquijote
Copy link

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment