Custom bootstrap modal problem in my meteor project

I would bet the blue outline is using the border property in one of the css files. You would need to confirm this using chrome dev tools or something alike to see what styles are being applied.

Once you know what style is being applied and by what file from using the dev tools then you can modify that border property.

Dylan if you are not familiar with them then you should check out this course.

https://teamtreehouse.com/library/website-optimization

These tools will really help you debug issues you are having on the front-end. But if you want a quick solution to your css problem without learning with these tools then you can go into each css file and just do a simple 'find' (command + f on mac) and (ctrl + f on windows) use this search to look for the word "border" and keep looking until you find the place where your style is being applied.. This will probably take some digging and will be cumbersome so learning the dev tools is a good skill to have :)

Yeah a couple of points..

So css hierarchy works like this on the file level: The last file being loaded takes precedence ex. If you load 2 css files and they both modify the same element then the last file loaded will take precedence

Inside the file it works like this: The last selector in the file will take precedence

But there is this thing called specificity in CSS and it is one of the harder topics to understand.. http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

Basically if you set outline: none; It will only take effect if your selector is more specific than the one that is applying the border So if your selector is

p {
  outline: none;
  // This is your customization.
}

And the selector that is applying the outline is

p[id="someid"] {
  outline: #00FF00 dotted thick;
}

Then your selector loses the battle because the other selector is more specific. The amount of specificity is hard to grasp but you can check it out in that link I posted just now. Again I would recommend the dev tools because they can tell you exactly what styles are being applied and therefore you will know what to change.

Photos always help. That and if you want to send me the files your working with I could potentially find the problem. If you need to send me anything Tommymay37@gmail.com

Dylan unfortunately I am unable to reproduce this problem. I went to the link you suggested and recreated that snippet with bootstrap, jquery, and the bootstrap mod. The light blue color does not show up for me. Without seeing your code I can only offer one more "bad" suggestion.

You can use the !important property https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

In your case you might wanna try this

#search input {
     // Not sure if it is a border or outline 
     border:none !important;
     outline: none !important;
 }

This will override any specificity there is for that element. This is considered bad practice but should do for now until you understand chrome dev tools or something similar.

If you provide me the code I would be happy to further assist.

Good Luck!