Question

我有一个表单，当我在表单内部单击时，我想用特定的背景颜色设置输入字段的样式。但是，我对此有点麻烦。这就是我所拥有的：

<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进行输入。谢谢！

Answer 1

您可以将其添加到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">

＆＃13;

    <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>

＆＃13;

Answer 2

如果要更改轮廓，请查看css outline属性。

input:focus, textarea:focus{
 outline: #00FF00 dotted thick;

}

Answer 3

我准备你无法写入css文件，所以你可以像这样使用jquery

$(":input").focus(function(){
    $(this).css("background","green");

    $(this).focusout(function(){
        $(this).css("background","");
     });
});

这里有JSFIDDLE显示它的实际效果

编辑看到比利帖后你不能使用jquery这是一个简单的javascript函数。

<input type="text" id="demoinput" onfocus="demoFocus(this.id)" onfocusout="demoFocusout(this.id)">

<script>
function demoFocus(x) {
    document.getElementById(x).style.background = "yellow";
}
function demoFocusout(x) {
    document.getElementById(x).style.background = "";
} 
</script>

以这种方式JSFIDDLE

如何使用内联背景颜色样式设置表单输入字段的样式

3 个答案: