The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS how to apply input font awesome icon as FOCUS on click in contact form 7

  • This topic is empty.
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)
  • The forum ‘CSS’ is closed to new topics and replies.