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

[alfietitu]

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

[uxfed]

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.

[alfietitu]

@uxfed,

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

regards,

Rahman

[Author]

Posts