Question

我试图在wordpress中的联系人表单7中的标签/ h3字段中设置验证css的样式。但是，验证仅适用于输入。我可以这样做，一旦一个人提交有错误或空白字段的表单，输入字段旁边的标签/ h3字段将变为红色，以显示哪个是错误的。

HTML

<h2>FREE CONSULTATION</h2>

<div class="headerstyle formname"><h3>Your name</h3>[text* your-name]</div>
<div class="headerstyle formemail"><h3>Your email</h3>[email* your-email]</div>
<div class="headerstyle"><h3>Your phone</h3>[tel your_phone]</div>

<p>[textarea your-message placeholder "Your message goes here"] </p>

<p>[submit "Send"]</p>

CSS

.homecontactform {
width: 350px;
position: relative;
display: block;
float: right;
}
.homecontactform:after {
content: "";
clear: both;
}
.homecontactform .wpcf7 {
width: 100%;
display: block;
position: relative;
background: #f4f4f4;
text-align: center;
border-radius: 15px;
padding: 20px 15px;
}
.homecontactform .wpcf7 h2 {
color: #567f56;
font-family: 'Lato', sans-serif;
font-weight: bold;
margin-bottom: 20px;
}
.homecontactform .headerstyle {
width: 100%;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-bottom: 15px;
}
.homecontactform .headerstyle h3 {
display: inline-block;
position: relative;
width:140px;
color: #fff;
font-family: 'Lato', sans-serif;
font-weight: normal;
margin: 0;
padding: 10px 5px;
background: rgba(127,187,127,1);
background: -moz-linear-gradient(top, rgba(127,187,127,1) 0%, rgba(84,125,84,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(127,187,127,1)), color-stop(100%, rgba(84,125,84,1)));
background: -webkit-linear-gradient(top, rgba(127,187,127,1) 0%, rgba(84,125,84,1) 100%);
background: -o-linear-gradient(top, rgba(127,187,127,1) 0%, rgba(84,125,84,1) 100%);
background: -ms-linear-gradient(top, rgba(127,187,127,1) 0%, rgba(84,125,84,1) 100%);
background: linear-gradient(to bottom, rgba(127,187,127,1) 0%, rgba(84,125,84,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fbb7f', endColorstr='#547d54', GradientType=0 );
border-radius: 15px 0px 0px 15px;
-moz-border-radius: 15px 0px 0px 15px;
-webkit-border-radius: 15px 0px 0px 15px;
}
.homecontactform .headerstyle h3:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(106, 156, 106, 0);
    border-left-color: #6a9c6a;
    border-width: 8px;
    margin-top: -8px;
        z-index: 10;
}
.homecontactform .headerstyle p {
  margin-bottom: 0px;
}
.homecontactform .wpcf7 input[type="text"], .homecontactform .wpcf7 input[type="email"],
.homecontactform .wpcf7 input[type="tel"] {
width: 100%;
padding: 12px 10px;
border-radius: 0px 15px 15px 0px;
-moz-border-radius: 0px 15px 15px 0px;
-webkit-border-radius: 0px 15px 15px 0px;
border: 1px solid #c6c6c6;
box-sizing: border-box;
}
.homecontactform .headerstyle span {
position: relative;
}
.homecontactform .wpcf7 input[type="text"].wpcf7-not-valid, .homecontactform .wpcf7 input[type="email"].wpcf7-not-valid,
.homecontactform .wpcf7 input[type="tel"].wpcf7-not-valid {
position: relative;
border: 1px solid #f00;
border-radius: 0px 15px 15px 0px;
-moz-border-radius: 0px 15px 15px 0px;
-webkit-border-radius: 0px 15px 15px 0px;
}
.homecontactform .wpcf7  .formname  .wpcf7-not-valid-tip:before {
content: "Your name";
color: #fff;
display: block;
position: absolute;
width: 130px;
top: -11px;
left: -130px;
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 18px;
margin: 0;
padding: 8px 0px;
background: rgba(253,102,107,1);
background: -moz-linear-gradient(top, rgba(253,102,107,1) 0%, rgba(255,0,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(253,102,107,1)), color-stop(100%, rgba(255,0,0,1)));
background: -webkit-linear-gradient(top, rgba(253,102,107,1) 0%, rgba(255,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(253,102,107,1) 0%, rgba(255,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(253,102,107,1) 0%, rgba(255,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(253,102,107,1) 0%, rgba(255,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd666b', endColorstr='#ff0000', GradientType=0 );
border-radius: 15px 0px 0px 15px;
-moz-border-radius: 15px 0px 0px 15px;
-webkit-border-radius: 15px 0px 0px 15px;
z-index: 20;
}
.homecontactform .wpcf7  .formname  .wpcf7-not-valid-tip:before:after {
        left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(254, 51, 53, 0);
    border-left-color: #fe3335;
    border-width: 10px;
    margin-top: -10px;
}
.homecontactform .wpcf7 span.wpcf7-not-valid-tip {
position: absolute;
top: 0;
left:0;
  color: #f00;
font-family: 'Lato', sans-serif;
  font-size: 1em;
  display: block;
padding: 0 10px;
  border: none;
box-sizing: border-box;
z-index: 5;
}
.homecontactform .wpcf7 textarea  {
width: 100%;
border-radius: 15px;
padding: 10px 10px;
box-sizing: border-box;
resize: none;
border: 1px solid #c6c6c6;
}

你可以看到一些有用的例子here和codepen here，但问题是由于联系表7中的一些编码，我无法将.wpcf7无效添加到h3。而且我不能在输入之前添加：因为输入没有内容。我该怎么做才能在验证开始时，h3字段的绿色背景变为红色？

最好的解决方案是编辑联系表单7，以便我也可以将.wpcf7-not-valid添加到h3。但是，我确实试着查看他们的文件，虽然我可以阅读和理解一些，但我无法理解其余部分以及我应该做些什么...... :(

Answer 1

查看页面上呈现的代码，似乎<form>元素在验证失败时应用了一个“无效”类。

您可以将其用作样式覆盖的钩子。

E.g。

.homecontactform form.invalid h3 {
   background: #f00; // red
}

联系表格7验证标签表格css

1 个答案: