Change border color on focus input (form-notch)

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Change border color on focus input (form-notch)

juliends99 asked 9 months ago

Expected behavior I would like to change the blue color around my input when it is in focus enter image description here

<span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tag"</span><span class="tag">></span><span class="pln"><mdb-form-control</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atn"</span><span class="tag">></span><span class="pln">class</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pun"</span><span class="tag">></span><span class="pln">=</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atv"</span><span class="tag">></span><span class="pln">"mb-4"</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tag"</span><span class="tag">></span><span class="pln">></span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln">
    </span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tag"</span><span class="tag">></span><span class="pln"><input</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atn"</span><span class="tag">></span><span class="pln">mdbInput</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atn"</span><span class="tag">></span><span class="pln">type</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pun"</span><span class="tag">></span><span class="pln">=</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atv"</span><span class="tag">></span><span class="pln">"text"</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atn"</span><span class="tag">></span><span class="pln">id</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pun"</span><span class="tag">></span><span class="pln">=</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atv"</span><span class="tag">></span><span class="pln">"form7Example1"</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atn"</span><span class="tag">></span><span class="pln">class</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pun"</span><span class="tag">></span><span class="pln">=</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atv"</span><span class="tag">></span><span class="pln">"form-control"</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tag"</span><span class="tag">></span><span class="pln">/></span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln">
    </span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tag"</span><span class="tag">></span><span class="pln"><label</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atn"</span><span class="tag">></span><span class="pln">mdbLabel</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atn"</span><span class="tag">></span><span class="pln">class</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pun"</span><span class="tag">></span><span class="pln">=</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atv"</span><span class="tag">></span><span class="pln">"form-label"</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atn"</span><span class="tag">></span><span class="pln">for</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pun"</span><span class="tag">></span><span class="pln">=</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"atv"</span><span class="tag">></span><span class="pln">"form7Example1"</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tag"</span><span class="tag">></span><span class="pln">></span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln">Name</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tag"</span><span class="tag">></label></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln">
</span><span class="tag"></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tag"</span><span class="tag">></mdb-form-control></span><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pln"</span><span class="tag">></span><span class="pln">

.form-outline .form-control:focus~.form-label {
    color: #00B74A;
}

.form-outline .form-control:focus~.form-notch .form-notch-leading {
    border-top: .125rem solid #00B74A;
    border-bottom: .125rem solid #00B74A;
    border-left: .125rem solid #00B74A;
}
.form-outline .form-control:focus .form-notch .form-notch-middle {
    border-bottom: .125rem solid;
    border-color: #00B74A;
}

.form-outline .form-control:focus~.form-notch .form-notch-trailing {
    border-color: #00B74A #00B74A #00B74A #00B74A;
    border-bottom: .125rem solid #00B74A;
    border-right: .125rem solid #00B74A;
    border-top: .125rem solid #00B74A;
}</span><span class="tag"></span></span>

Actual behavior Currently blue, and I can't change the color

Resources (screenshots, code snippets etc.) I tried the same as in this snippet but it's not working, maybe because I'm on the Angular MDBoostrap version : https://mdbootstrap.com/snippets/standard/m-duszak/3797057#css-tab-view

Rafał Seifert answered 8 months ago

Please try to use such styles. Remember to place them in your global styles.scss file below your mdb import:

@import "mdb-angular-ui-kit/assets/scss/mdb.scss";

.form-outline .form-control:focus ~ .form-label {
    color: #00B74A;
}

.form-outline .form-control:focus ~ .form-notch {

    .form-notch-leading {
        border-top: .125rem solid #00B74A;
        border-bottom: .125rem solid #00B74A;
        border-left: .125rem solid #00B74A;
        box-shadow: none;
    }

    .form-notch-middle {
        border-top: none;
        border-bottom: .125rem solid;
        border-color: #00B74A;
        box-shadow: none;
    }

    .form-notch-trailing {
        border-color: #00B74A #00B74A #00B74A #00B74A;
        border-bottom: .125rem solid #00B74A;
        border-right: .125rem solid #00B74A;
        border-top: .125rem solid #00B74A;
        box-shadow: none;
    }
}

Let me know if that serves your needs.

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 2.2.0
  • Device: Own computer
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags
color input form-notch form-outline form-control
Related topics
0
Input Placeholders not showing unless clicked
0
React/Next.js change the css of input border
0
Override the Form Control Color
0
How can i set a background-color for input-fields with readonly
0
Ambiguous form labels
About author
juliends99
0Support score
1Questions 0Answers
0Snippets likes 0Snippets