change outline border color

  • Resolved joostmulder

    (@joostmulder)


    6 years, 3 months ago

    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

    (@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.

    Thanks,
    Angus

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