WP Login Form | Remove Focus Border from Password Visibility (Eye) Button

  • Resolved Generosus

    (@generosus)


    2 years, 9 months ago

    Good Day!

    I couldn’t find a solution that works, so hopefully, someone here can help.

    I’d like to accomplish the following for the WP login form password visibility (eye) button:

    (1) Change the color of the focus border
    (2) Disable the focus border completely

    Details: https://ibb.co/s5npX47

    A CSS code (one for each case above) should do the trick.

    Anyone care to share their magic?

    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)

  • You’re using a customized login form, not the default WordPress login form.

    You need to provide your LIVE link so we can check the form’s code and give you CSS code specific to your customized login form.

    Thread Starter Generosus

    (@generosus)

    Hi @gappiah,

    Thanks for your help.

    I’m using the plugin, Admin Custom Login. However, the plugin does not modify the form fields.

    So, if you can provide the CSS codes requested for the standard WordPress login form, they should work for me.

    Can you provide them? If they don’t work, I’ll let you know.

    Again, thank you!

    Thread Starter Generosus

    (@generosus)

    Solution:

    Use the following CSS Codes:

    (1) To Change the color of the dashicon (visibility, eye)

    .login .button.wp-hide-pw .dashicons {
    color: #707070!important;
}

    (2) To remove the focus border surrounding the dashicon (visibility, eye)

    .login .button.wp-hide-pw:focus {
   outline: none!important;
   border: none!important;
   box-shadow: none!important;
}

    Enjoy!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘WP Login Form | Remove Focus Border from Password Visibility (Eye) Button’ is closed to new replies.