如何样式表单输入字段与内联背景颜色样式

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 /> \t \t \t \t \t \t \t 
 
    <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" /> \t \t \t \t \t \t 
 
</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; 
} 

UPDATE：

您可以添加以下代码，您<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 /> \t \t \t \t \t \t \t 
 
     <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" /> \t \t \t \t \t \t 
 
    </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>

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> 

和这样