Change border color on focus input (form-notch)

Topic: Change border color on focus input (form-notch)

juliends99 asked 3 weeks 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

Add comment

Rafał Seifert staff answered 2 weeks ago

0 0 Best answer

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.

Add comment

Write

Create snippet

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

juliends99

0Support score
1Questions 0Answers

0Snippets likes 0Snippets