Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Tushar Singh
Courses Plus Student 8,692 Pointsdamn outline !! Help
Using bootstrap, there must be a way to remove outline from buttons(sorry I'm pathetic with css)
I am working on a calculator, now the problem is when I click the button, there's an outline on the button when I click it, although outline stays for a few milisecs but it's ruining everything.
Click on any number button as the color is white on hover, it is clearly visible, help me fix this.
6 Answers
Kristopher Van Sant
Courses Plus Student 18,830 PointsHey guys, check out the following post on Stack Overflow, http://stackoverflow.com/questions/21201080/bootstrap-button-remove-outline-on-chrome-os-x . Based off this post I believe you need to add .btn:active:focus . I tried it with your Pen and I think it's what you're looking for.
.btn:active, .btn:focus, .btn:active:focus{
outline: none; !important
border: none; !important
box-shadow:0px 0px rgba(0,0,0,.2);
}
Kristopher Van Sant
Courses Plus Student 18,830 PointsAlso do you want the small thin outline to still show after the button has been clicked? If you want to have that removed you need to remove the !important after outline: none. And if you want it to look like it's pressed in, by having the bottom shadow disappear, remove the other !important after border: none;
Erik Nuber
20,629 PointsYou might try a space between outline and none because your code looks correct otherwise. The only other thing I could suggest would be to test the entire .btn class and leave off the focus and active states.
Ivan Villa
8,597 PointsI think you are running into a specificity issue because setting the outline to important forced it to work.
.btn:active, .btn:focus{
outline:none !important;
border: none;
box-shadow:0px 0px rgba(0,0,0,.2);
}
Tushar Singh
Courses Plus Student 8,692 PointsNope, not working. I already tried that.
Kevin Korte
28,149 PointsThis solution works for me
Tushar Singh
Courses Plus Student 8,692 PointsWhen I click the button,the outline is visible, if I hold on to the click the outline stays and as soon as I let go off the click, outline disappears. To solve this I think we use :focus if I'm not wrong then why is it not working ??
Erik Nuber
20,629 PointsCould we get your entire code? Because again what you have is correct and there must be something else causing the problem.
Tushar Singh
Courses Plus Student 8,692 PointsThanks, to be honest I've never used this keyboard "!important"ever before.Why would I use it and when?
Kevin Korte
28,149 PointsYou generally should never use it, because it creates all sorts of specificity problems later down the road. It's used to absolutely override any other conflicting css value, regardless of specificity. Generally it's best to only use it only when you're trying to make modifications to css code you didn't right, and are having a hard time beating the specificity on. Maybe that be a plugin, or theme you're using.
In this case, there was still a lingering outline at least in webkit, and it can be difficult sometimes to override a browser default style, especially one that has to do with accessibility. It's generally best practice to not remove outlines from buttons, but that's besides the point.
Tushar Singh
Courses Plus Student 8,692 PointsThanks for the help AGAIN. I was wondering can I use eval function to calculate tangent, cosine,etc etc as well?
Tushar Singh
Courses Plus Student 8,692 PointsTushar Singh
Courses Plus Student 8,692 PointsWhy this is not resolving the issue?(btn class for all buttons)