Skip to main content

Forums

This topic contains 2 replies, has 2 voices, and was last updated by  alfietitu 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #289155

    alfietitu
    Participant

    How to change icon color on click as “FOCUS”. i have managed to apply this on border of each field but couldn’t fix icon focus. I have applied following CSS code in order to style my contact form 7.

    .wpcf7 .wpcf7-text,
    .wpcf7 .wpcf7-select,
    .wpcf7 .wpcf7-textarea{
    text-indent: 30px;

    font-family: Roboto;
    width: 100%;
    height: 42px;
    border: 1px solid #0d5509 !important;
    border-radius: 4px;
    color: #959595;
    }

    .wpcf7 p{
    position: relative;
    }

    .wpcf7 p .fa{
    position: absolute;
    color: #0d5509;
    z-index: 1;
    font-size: 15px;
    top: 30%;
    left: 1.5%;
    }

    .wpcf7 p .fa-pencil{
    top: 5%; left: 1.5%
    }

    .wpcf7-text:focus, .wpcf7-select:focus, .wpcf7-textarea:focus{
    border:2px solid #ff0000 !important;
    border-radius: 4px;
    }

    My contact page link: https://eoe.gipcl.org.uk/contact and I wish to make it like this: https://it.gipcl.org.uk/contact

    #289164

    uxfed
    Participant

    They’re changing the background image with javascript. Personally I don’t like to do that because it’s using two images when one will do.

    You could absolutely position an SVG element and use CSS to change the colour on focus.

    #291742

    alfietitu
    Participant

    @uxfed,

    Thank you so much for your feedback. I think I have got to learn more coding :)

    regards,

    Rahman

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star