Border size of a form-outline element


Topic: Border size of a form-outline element

pawled pro premium priority asked a year ago

How to properly change border size of a form-outline element?


Michał Duszak staff answered a year ago

Those borders are being applied by its child, the form-notch element. You can modify it with CSS using selectors:

 .form-outline .form-control~.form-notch .form-notch-leading 
 .form-outline .form-control~.form-notch .form-notch-trailing 
 .form-outline .form-control~.form-notch .form-notch-middle

See how it works in this snippet: https://mdbootstrap.com/snippets/standard/m-duszak/2973948#css-tab-view

Keep coding,

Michal Duszak


pawled pro premium priority answered a year ago

There's problem with it.

active

not active


Michał Duszak staff answered a year ago

I was able to reproduce this problem by adding size only to some notches. Each value should be equal in order to maintain a non-sharped border. e.g:

/* unfocused borders*/
    .form-outline .form-control~.form-notch .form-notch-leading {
    border-top: .325rem solid #ffaabb;
    border-bottom: .325rem solid #ffaabb;
    border-left: .325rem solid #ffaabb;
} 

 .form-outline .form-control~.form-notch .form-notch-trailing {
    border-top: .325rem solid #ffaabb;
    border-right: .325rem solid #ffaabb;
    border-bottom: .325rem solid #ffaabb;
} 

 .form-outline .form-control~.form-notch .form-notch-middle {
    border-bottom: .325rem solid #ffaabb;
    border-top: .325rem solid #ffaabb;
} 

If this is not working for you, please provide me a 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

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No