テキストボックスinputフォーカスフォーカスフォーカスフォーカススタイル実装コード

まずcssの擬似クラス:focusで変更できます.
テキストボックスのhtmlコードは次のように仮定されます.

 
  
 
  
Name: 
 
  
 
  
Password: 
 
  
 
  
Textarea: 
 
  
</dd> 
  <br/></dl> 
  <br/> 
 </code></pre> 
 <br/> 
 <br/>css      ： 
 <br/> 
 <br/>input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border: 1px solid #f00; background: #ccc; } 
 <br/>        、   、        input         。               。 
 <br/> 
 <br/>            ？    （Firefox, Safari, IE7）   ，  ok，     IE6. 
 <br/> 
 <br/>   IE6              js ，    jquery        。 
 <br/> 
   
 <pre><code> 
  <br/>$(document).ready(function(){ 
  <br/>$("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this). css({background:"#ccc", border:"1px solid #f00"})} ); 
  <br/>}); 
  <br/> 
 </code></pre> 
 <br/>jquery          ，   css         ！ 
 <br/> 
 <br/>        ，jquery            ，     ，        ，          。 
 <br/> 
   
 <pre><code> 
  <br/>$(document).ready(function(){ 
  <br/>$("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).css({background:"#ccc", border:"1px solid #f00"})}).blur(function(){$(this).css({background: “#FFF”, border: “1px solid #ccc”})}); 
  <br/>}) 
  <br/> 
 </code></pre> 
 <br/>          ，      。 
 <br/> 
 <br/>        jquery addClass removeClass     ： 
 <br/> 
   
 <pre><code> 
  <br/>$(document).ready(function(){ 
  <br/>$("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).addClass("focus")}).blur(function(){$(this).removeClass("focus")}); 
  <br/>}) 
  <br/> 
 </code></pre> 
 <br/>   input       ，      addClass  css“focus”，        removeClass  css“focus”。 
 <br/> 
 <br/>     ！ 
 <div class="clearfix"> 
  <span id="art_bot" class="jbTestPos"/> 
 </div> 
</div>
                            </div>
                        </div>