Skip to main content


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
  • #289155


    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: and I wish to make it like this:



    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.




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



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