There is a thin and distracting border that appears on text field focus, how can I remove it

  • Profile Image
    Asked on July 17, 2016 at 10:29 AM

    Hi there, I have tried to remove the border that appears when I click on the field using all the below css but to no avail, can you help?

    textarea:focus, input:focus, .form-textbox:focus, select:focus, textarea:hover, input:hover, .form-textbox:hover, select:hover  {

    border: none;
    box-shadow: none !important;
    outline:none !important;
    outline-width: 0px;


    The form is:

    Thank you

  • Profile Image
    Answered on July 17, 2016 at 12:00 PM

    Hey Steven, looks like your mini mailing list form is beginning to take shape :)

    Please try these CSS codes to remove the highlight effect on focus:

    .form-line-active input:focus {

       border: none;


    Let us know if that works or not so we can have another look. Here's how it looked like on my cloned form after making the changes: