Topic: Change border color on focus input (form-notch)
juliends99 free asked 8 months ago
Expected behavior I would like to change the blue color around my input when it is in focus
<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 free 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: 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