CODEWITHSUNDEEP
css
user1900662
user1900662

Reputation: 299

How to apply border to textbox on focus?

I have an textbox with image inside it and i have the textbox and image inside a div. The div covers the exact size of the textbox. Now i need to add an border to the textbox on focus how to do it please help.The code is as below.

<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>

when i try putting onfous border for input text its not showing fully. Please help.

This is how it is now

enter image description here

This is how i want.

enter image description here

Upvotes: 1

Views: 222

Answers (4)

OCJP
OCJP

Reputation: 1033

try adding a new class called username and password for your input text and put the below jquery it would work fine.

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

Upvotes: 1

Libin
Libin

Reputation: 2462

You need to put outline: none also on css.

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

Demo here: http://jsfiddle.net/libinvbabu/JDsKh/

Upvotes: 0

Manoj Gupta
Manoj Gupta

Reputation: 298

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

try this i have used it.

Upvotes: 1

codingrose
codingrose

Reputation: 15699

try

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

Upvotes: 0

Related Questions