Can't remove border of input element

Question

I am using Chrome. I am using Materialize CSS (in an Angular app). I can't remove the blue border that surrounds my number input on focus. I have tried many variations of the below, as well as some I have certainly left out in my repetition.

<div class="input-field">
  <label class="" for="customTarget">Desired value:</label>
  <input id="customTarget" type="number" class="validate" step="any" min="0">
</div>

input:focus, input {
  outline: none;
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  border: solid 2px transparent;
}

Please, what have I missed?

Answer 1

all you need to do is to add !important after the attributes you want to change in your css code.

input:focus {
  outline: none !important;
  outline-style: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<input type="number" />