css - フォーカス時にテキストボックスに境界線を適用する方法は?

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>

入力テキストに飾り気のない境界線を入れようとすると、完全に表示されません。助けてください。

今はこんな感じ

これが私の望みです。

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

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

これを試してください私はそれを使用しました。

Answer 3

outline: nonecssも入れる必要があります。

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

デモはこちら: http://jsfiddle.net/libinvbabu/JDsKh/

Answer 4

試す

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