No way to override Bootstrap - css

Question

First off, I did research this topic here and via Google for an entire day, and tried all I have found, for some reason I still can not seem to change Bootstrap styling. My custom css DOES work, since the first modification from it worked just beautifully where it did not need to override anything (so there was no default styling for input:hover, which I used, in bootstrap.)
Here is some code:
.input-group-prepend.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}
NOTE that the selector here must be like the 20th version I tried. Here I can not change the way the input field behaves when in focus. I tried everything after like a dozen searches on Google, nothing worked. I also used Chrome Inspect to find where box-shadow is used, and inside Inspect I could also CHANGE the property, which resulted the look I desired, but after copying that part to my css with the css selector, it did not work anymore. Having tried also tweaking the selectors to make them more specific, calculated the 'Priority points' or whatever they are called even, used IDs and whatever, and put my stylesheet link after the bootstrap one in the html file - no change (for the better, that is). These all worked for other people here and on YouTube and everywhere on the internet, and seemingly I have the very same situation and solution and for me they still don't. I am thinking of leaving bootstrap and try building something from scratch, but I am not that experienced in CSS, and I feel like I never want to be if it is like this.[enter image description here][1]
Some more code:
button .btn-raised {
box-shadow: 0 30px 0 0 #007299;
}
The second part, when trying to set the box-shadow for buttons, it is not possible, even though neither btn or btn-light, which I use, does do anything with box-shadow, Chrome Inspect simply shows 'none' as the value of this property. (Although I found that there is some transition where it is involved, but no way I can override or disable it.) Again, a hell of a lot of selector variations was tried.
UPDATE: The problem is solved, turned out all the problems I had was because I missed clearing the cache before reloading the page - never forget that! :)

Answer 1

Seems to be working fine for me. I think you may be loading your CSS before Bootstrap or you have other styles overriding your latest styles due to specificity.
As a last resort, just to test this theory, you could try adding !important after your styles. If this works then you know it's an issue with selector specificity but I don't recommend using !important in general.
eg:
div {
background-color: #000 !important;
}
button {
box-shadow: 2px 5px 1px 0 #007299;
}
.input-group-prepend {
margin-top: 20px;
}
.input-group-prepend .form-control:focus {
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-light">I am a button</button>
<div class="input-group-prepend">
<input type="text" class="form-control">
</div>