Css 如何将边框应用于焦点上的文本框？

我有一个里面有图像的文本框，我有一个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>

当我尝试为输入文本加上边框时，它并没有完全显示出来。请帮忙

现在就是这样

这就是我想要的

试试看

---

试试这个，我已经用过了。

你需要把

outline:none

也放在css上

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

---

此处演示：

尝试为您的输入文本添加一个名为username和password的新类，并将下面的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" );
        });

---

你能提供一个你想要的图片以及它现在显示的内容吗？也可以粘贴你的css或者在这里创建一个演示：问题是我在文本框内也有一个图像我需要图像边框太多请再次参考问题我已经更新了。问题是我在文本框内也有一个图像我需要图像边框太多请参考问题又来了，我更新了。问题是我的文本框里也有一张图片，我需要图片的边框，请再次参考我更新的问题。

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

$("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" );
        });