html - 如何使用 css 将图标颜色更改为关注单击联系表 7

Question

您好，我一直在尝试更改点击时的图标颜色(输出为焦点)。我已经设法将联系人表单字段边框更改为焦点，但无法更改图标。

我已经尝试使用::before::after 但它没有用。我也试过.wpcf p .fa:focus{color: #colorcode}

我已经应用了以下 CSS 代码来设计当前联系表 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;
}

我的联系页面链接:https://eoe.gipcl.org.uk/contact我希望这样做:https://it.gipcl.org.uk/contact

Answer 1

background-color: rgb(242, 242, 242);
border-bottom-color: rgb(102, 102, 102);
border-bottom-left-radius: 4.5px;
border-bottom-right-radius: 4.5px;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(102, 102, 102);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(102, 102, 102);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(102, 102, 102);
border-top-left-radius: 4.5px;
border-top-right-radius: 4.5px;
border-top-style: none;
border-top-width: 0px;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 2px, rgba(0, 0, 0, 0.08) 0px 1px 0px 0px inset;
box-sizing: border-box;
color: rgb(102, 102, 102);
cursor: text;
display: inline-block;
font-family: Oswald, sans-serif;
font-size: 15px;
font-stretch: 100%;
font-style: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: 400;
height: 42px;
letter-spacing: normal;
line-height: 42px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 6px;
outline-color: rgb(102, 102, 102);
outline-style: none;
outline-width: 0px;
padding-bottom: 8px;
padding-left: 50px;
padding-right: 12px;
padding-top: 8px;
text-align: start;
text-indent: 0px;
text-rendering: auto;
text-shadow: none;
text-size-adjust: 100%;
text-transform: none;
transition-delay: 0s;
transition-duration: 0.3s;
transition-property: all;
transition-timing-function: ease;
vertical-align: top;
width: 744.987px;
word-spacing: 0px;
writing-mode: horizontal-tb;