포커스가있는 텍스트 상자에 테두리를 적용하는 방법은 무엇입니까?

Question

이미지 안에 이미지가있는 텍스트 상자가 있고 div 안에 텍스트 상자와 이미지가 있습니다. div는 텍스트 상자의 정확한 크기를 포함합니다. 이제 텍스트 상자에 테두리를 추가하여 초점을 맞추는 방법을 알려주세요. 코드는 아래와 같습니다.

<div class="username-bg"> 
     <!-- Sign in here <br/> --> 
     <!-- Login: --> 
     <input type="text" id="username" title="Username" maxlength="50" value="" required="true" /><!-- <br/> --> 
     <img src="user-icon.png" alt="" Class="user-icon"/> 
     <!-- <img src="images/user-icon.png" alt="" /> --> 
     </div> 

내가 완전히 표시되지 입력 텍스트에 onfous 경계를 넣어하려고 할 때. 도와주세요.

이것은이 내가 방법을 지금

방법이다.

Answer 1

시도하여 입력 텍스트에 대한 사용자 이름과 암호라는 새로운 클래스를 추가하고 그것을 잘 작동합니다 아래 jQuery를 넣어.

$("body").click(function(event) { 

     if($(event.target).attr('class') != "username" && $(event.target).attr('class') != "password" && $(event.target).attr('class') != "forgotpass") 
     { 
      $("#passbg").removeClass("password-bg-focused").addClass("password-bg"); 
      $("#userbg").removeClass("username-bg-focused").addClass("username-bg"); 
      $("#forgotpass").removeClass("username-bg-focused").addClass("username-bg"); 
     } 
    }); 

    $(".username").focus(function() { 
     $("#userbg").removeClass("username-bg").addClass("username-bg-focused"); 
     $("#passbg").removeClass("password-bg-focused").addClass("password-bg"); 
    }); 

    $(".password").focus(function() { 
     $("#passbg").removeClass("password-bg").addClass("password-bg-focused"); 
     $("#userbg").removeClass("username-bg-focused").addClass("username-bg"); 
    }); 

    $(".forgotpass").focus(function() { 
      $("#forgotpass").removeClass("username-bg").addClass("username-bg-focused"); 
     }); 

Answer 2

내가 그것을 사용하고 이것을 시도

#username:focus{border:1px solid #ccc;} 

Answer 3

input[type="text"]:focus:hover{ 
outline: none; 
box-shadow: 0px 0px 5px #61C5FA; 
border:1px solid #5AB0DB; 
border-radius:0; 
} 

을 시도합니다.

Answer 4

outline: none도 CSS에 넣어야합니다. 여기

#username:focus { 
    border: 1px solid green; 
    outline: none; 
} 

데모 : http://jsfiddle.net/libinvbabu/JDsKh/