Border color of active form fields with .is-invalid and .input-group-prepend

[trcrt]

Let's assume we have a following layout: <div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="tim-icons icon-email-85"></i></span></div><input type="email" name="email" value="" placeholder="Email" class="form-control is-invalid" id="id_email"></div> With when user clicks on a field, .input-group-focus style appears on the outer div. In that moment, border color of input changes from danger to warning, but border color of .input-group-prepend changes to primary.

[rarestoma]

Hi,

Thank you for the interest in our products. Can you please help me with a video? I tried what you said but it looks fine when i do those steps.

All the best, Rares

[stevenrugg]

I imagine maybe you have a :hover rule somewhere in your css that overlaps with the css for that outer div. Can you reply with the css rules of .input-group-focus please?

[trcrt]

I imagine maybe you have a :hover rule somewhere in your css that overlaps with the css for that outer div. Can you reply with the css rules of .input-group-focus please?

No, there is no custom css. All .input-group-focus-related styles are in blk-design-system.css. To be honest, I don't think that this is some big problem. I don't even know if it's still reproduces in the current version of this library. I just left this issue as is. Here is some screenshots, if it'll be helpful.

Before focusing:

After focusing:

Related html:

<div id="div_id_alias" class="form-group has-danger"> 
  <div class=""> 
    <div class="input-group"> 
      <div class="input-group-prepend"> 
        <span class="input-group-text">
          <i class="tim-icons icon-badge"></i>
        </span> 
      </div> 
      <input type="text" name="alias" value="ссс" maxlength="32" placeholder="Placeholder" class="textinput textInput form-control is-invalid" required="" id="id_alias"> 
    </div> 
  </div> 
</div>