Support » Plugin: Material Design for Contact Form 7 » change outline border color

  • Resolved joostmulder


    How can you change the outline border color of the object with class “mdc-notched-outline”. It’s currently dark, but I would like it to be grey. Fiddling with CSS did not do the trick for me. Please help.

Viewing 1 replies (of 1 total)
  • Plugin Author GusRuss89


    Hi @joostmulder,

    It’s a tricky one because there are a lot of different states that all have their own CSS rules.

    If you want to change the outline colour of an unfocused field, you should be able to do something like this:

    /* Unfocused field outline */
    #cf7md-form .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__path,
    #cf7md-form .mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__path {
      stroke: green;
    #cf7md-form .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__idle,
    #cf7md-form .mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__idle {
      border-color: green;

    And for focused fields:

    /* Focused fields outline */
    #cf7md-form .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__idle,
    #cf7md-form .mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline__idle {
      border-color: blue;

    You can add this CSS under Appearance > Customiser > Material Design Forms > Custom CSS. Obviously you can change the colours from blue and green to whatever you like.


Viewing 1 replies (of 1 total)
  • The topic ‘change outline border color’ is closed to new replies.