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

CSS Bootstrap 4 Basics (Retired) Building Forms with Bootstrap Custom CSS

Mark Lawson
Mark Lawson
6,148 Points
Posted by Mark Lawson
Mark Lawson
6,148 Points

Border color

I have changed the colour of the buttons and I have been able to change the all the colours in various states. However, I cannot get rid of the blue border when the button has been pressed. Can anyone help? If you need to see my code, I can post.

Thanks

Julian Gutierrez
Julian Gutierrez
19,201 Points
Julian Gutierrez
Julian Gutierrez
19,201 Points

Not a Bootstrap user but I would suggest to utilize the developer tools in your browser to identify which class or id is responsible for the blue border.

Mark Lawson
Mark Lawson
6,148 Points
Mark Lawson
Mark Lawson
6,148 Points

Thanks Julian, unfortunately its in active state; not sure how I check in active state.

Mark

Julian Gutierrez
Julian Gutierrez
19,201 Points
Julian Gutierrez
Julian Gutierrez
19,201 Points

I see that you solved your problem, but just an fyi many developer tools let you toggle active states to troubleshoot. In chrome there's a drop down in filters labeled ":hov" that lets you toggle active, hover, focus and visited states.

2 Answers

Mark Lawson
Mark Lawson
6,148 Points
Mark Lawson
Mark Lawson
6,148 Points

If its of any use to anyone, I managed to solve the problem. 

          .btn:focus,
.btn:active {
   outline: none !important;
}
          ```
Chris Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points
Chris Thomas
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points

You'll need to target it with the :focus pseudo class. 

myButton:hover,
myButton:focus {
   property: style;
}
Mark Lawson
Mark Lawson
6,148 Points
Mark Lawson
Mark Lawson
6,148 Points

I have added your code; doesn't seem to work

          .btn:hover, 
.btn:focus { 
   border-color: #d74419;
} 

Can you assist any more?

Thanks
          ```