Ionic 2 input highlight

Question

I'm trying to make a form but I'm stuck trying to change the highlight color when an item has focus (see picture). I tried Using this line of code in my Sass which I've found in the Ionic docs, but it doesn't seem to work. Does anyone know how this works?

$text-input-md-highlight-color: #000000;

Answer 1

Try this one:

<div class="container">

  <h2>Design in CSS3<small>Inputs</small></h2>

  <form>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Name</label>
    </div>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Email</label>
    </div>

  </form>



</div>

DEMO HERE

Answer 2

You need to overide the SASS in variable.scss file for it take affect. See more here. Put:

$text-input-md-highlight-color: #000000;

in src/theme/variable.scss.