如何樣式表單輸入字段與內聯背景顏色樣式

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> 

和這樣