如何在焦点上应用边框到文本框？

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

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

尝试这个我用过它。

Answer 2

尝试为输入文本添加一个名为用户名和密码的新类，并将下面的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 3

试

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

Answer 4

您还需要将outline: none放在css上。

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

在这里演示：http://jsfiddle.net/libinvbabu/JDsKh/