我有一个表单,当我在表单内单击时,我想用特定的背景颜色设置输入字段的样式。但是,我对此有些麻烦。这是我所拥有的:
<form name="" action="/communicate/#wpcf7-f11-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="11" /><br />
<input type="hidden" name="_wpcf7_version" value="4.0" /><br />
<input type="hidden" name="_wpcf7_locale" value="" /><br />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f11-o1" /><br />
<input type="hidden" name="_wpnonce" value="d6b53e1ecd" />
</div>
<p style="color: #fff;">Your Name (required)<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span>
</p>
<p style="color: #fff;">Your Email (required)<br />
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span>
</p>
<p style="color: #fff;">Subject<br />
<span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span>
</p>
<p style="color: #fff;">Your Message<br />
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span>
</p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
我想在选择时将输入字段设置为黑色。我还需要一种叠加样式,但是稍后再讲。有人能帮忙吗?我没有编写CSS规则的奢侈之处,因为我正在从一个人古怪的WordPress网站中破解一个损坏的表格。不会在<span>
标签中进行更改吗?我使用内联样式设置了字段名称#fff
,并希望使用进行输入#000
。谢谢!
您可以将其添加到CSS中:
input:focus, textarea:focus {
background: black;
color: white;
}
更新:
您可以在<input>
标签和<textarea>
标签内添加以下代码:
onclick="this.style.backgroundColor='black';this.style.color='white'" onblur="this.style.backgroundColor='white';this.style.color='black'"
像这样:
<input type="text" onclick="this.style.backgroundColor='black';this.style.color='white'" onblur="this.style.backgroundColor='white';this.style.color='black'" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false">
<form name="" action="/communicate/#wpcf7-f11-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="11" /><br />
<input type="hidden" name="_wpcf7_version" value="4.0" /><br />
<input type="hidden" name="_wpcf7_locale" value="" /><br />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f11-o1" /><br />
<input type="hidden" name="_wpnonce" value="d6b53e1ecd" />
</div>
<p style="color: #fff;">Your Name (required)<br />
<span class="wpcf7-form-control-wrap your-name"><input onclick="this.style.backgroundColor='black';this.style.color='white'" onblur="this.style.backgroundColor='white';this.style.color='black'" type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span>
</p>
<p style="color: #fff;">Your Email (required)<br />
<span class="wpcf7-form-control-wrap your-email"><input onclick="this.style.backgroundColor='black';this.style.color='white'" onblur="this.style.backgroundColor='white';this.style.color='black'" type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span>
</p>
<p style="color: #fff;">Subject<br />
<span class="wpcf7-form-control-wrap your-subject"><input onclick="this.style.backgroundColor='black';this.style.color='white'" onblur="this.style.backgroundColor='white';this.style.color='black'" type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span>
</p>
<p style="color: #fff;">Your Message<br />
<span class="wpcf7-form-control-wrap your-message"><textarea onclick="this.style.backgroundColor='black';this.style.color='white'" onblur="this.style.backgroundColor='white';this.style.color='black'" name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span>
</p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句