1

我有一个里面有图像的文本框，我有一个 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 边框时，它没有完全显示。请帮忙。

这就是现在的样子

在此处输入图像描述

这就是我想要的。

在此处输入图像描述

4

4 回答 4

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

试试这个我用过。

于 2013-10-16T05:54:54.310 回答
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" );
        });
于 2013-10-16T13:05:21.610 回答
0

尝试

#username:focus{border:1px solid #ccc;}
于 2013-10-16T05:52:51.207 回答
0

你还需要放在outline: nonecss上。

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

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

于 2013-10-16T05:54:55.830 回答