how to add border around input

[hwoarang69]

 <input type="text" name="password_txt" id="login_password_text" class="login_field" value=""/>

so i have this field. whener ever i click on this field iam getting a yellow border around it. i dont understand why. i remover all my css and js file but still i was get it.
so i add this code to remove the yellow border:

 input:focus {
    outline: none; 
}

so now i have no border around my input field which is what i want.
and now i want to add border red to it. so:

 input:focus {
    outline: none; 
    border: 1px solid red;
}

but i dont get a border around it. also i tried this:

 input:focus {
    border: 1px solid red;
}

doesnt work too.

[<M/>]

may you post the code you have tried (you've mentioned you had more css)... i believe i can pluck out a solution

[<M/>]

Well... can't you just do this:

input:focus
{ 
border: 1px solid yellow;
}

[<M/>]

unless there is an interference

[<M/>]

Quick question... are you using a mac?

[<M/>]

If so, try increasing the border size... see if you can see it (try testing it with 10px;)

[hwoarang69]

Well... can't you just do this:

i tried this but didnt worked for some reason. i also remove all my css file but still nothing.

Quick question... are you using a mac?

i am using window on apple.

[hwoarang69]

dont have to go though all of the code. may be some thing stand out.

<div class="outer_hint">
    <label>Username:</label> 
    <input type="text" name="username" id="login_username" class="field" value="" />
    <!-- HINT --><span class="hint">6 to 20 characters(letters and numbers only)</span>
 </div>  

css file

===================================================================
    @charset "utf-8";
    /* CSS Document */


    #top_login
    {
        background-color:#603075;
        color:#FFF;
        text-shadow: 1px 1px 2px black;
        -webkit-text-shadow:1px 1px 2px black;
        -moz-text-shadow:1px 1px 2px black;
        filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=black);
        text-align:left;
        padding:5px;
        padding-left:15px;
        border-bottom:3px solid #000;
        border:1px solid #FFF;
        position:relative;
    }
    #lock_img
    {
        position:absolute;
        left: 262px;
        top:27px;
    }



    /* login form */    
    #left_login
    {
        float:left;
    }
    #right_login
    {
        float:right;    
        position:relative;
    }
    #login{
        margin:5em auto;
        background:#fff;
        border:8px solid #eee;
        width:500px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        -moz-box-shadow:0 0 10px #4e707c;
        -webkit-box-shadow:0 0 10px #4e707c;
        box-shadow:0 0 10px #333;
        text-align:left;
        position:absolute;
        right:40px;
        top:-10px;
        }

    #login a, #login a:visited{color:#006ec7;}
    #login a:hover{color:#006ec7;}
    #login h1{
        background:#b933ad;
        color:#fff;
        text-shadow: 1px 1px 2px black;
        -webkit-text-shadow:1px 1px 2px black;
        -moz-text-shadow:1px 1px 2px black;
        filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=black);
        font-size:14px;
        padding:18px 23px;
        margin:0 0 1.5em 0;
        border-bottom:3px solid #603075;
        }

    #login p{margin:.5em 25px;}
    #login .forgot{text-align:right;font-size:11px;}
    #login .back{padding:1em 0;border-top:1px solid #eee;text-align:right;font-size:11px;}
    #login div{
        margin:.5em 25px;
        background:#E8E8E8;
        padding:4px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        text-align:right;
        position:relative;
        }   
    #login label{
        float:left;
        line-height:30px;
        padding-left:10px;
        font-weight:bold;
        }


    #login .field{
        border:1px solid #ccc;
        width:280px;
        font-size:12px;
        line-height:1em;
        padding:4px;
        padding-left:10px;
        -moz-box-shadow:inset 0 0 5px #ccc;
        -webkit-box-shadow:inset 0 0 5px #ccc;
        box-shadow:inset 0 0 5px #ccc;
        }   


    #login #submit{background:none;margin:1em 25px;text-align:left;}    
    #login div#submit label{float:none;display:inline;font-size:11px;}  
    #login button{
        border:0;
        padding:0 30px;
        height:30px;
        line-height:30px;
        text-align:center;
        font-size:12px;
        color:#fff;
        text-shadow:#000 0 1px 0;
        background:#666;
        cursor:pointer;
        }
    #login button:hover
    {
        border:.90px solid #000;
        padding:0 30px;
        height:30px;
        line-height:30px;
        text-align:center;
        font-size:12px;
        color:#fff;
        text-shadow:#000 0 1px 0;
        background:#515151;
        cursor:pointer;
    }

    #submit
    {
        position:relative;
    }
    #login_remember{
        position:absolute;
        right:305px;
        top:8px;
    }
    #login_stay
    {
        position:absolute;
        right:160px;
        top: -2px;
    }

[<M/>]

so where is the styling for: login_username... and i am not sure why you provided me with other irrelevent parts like the submit button, the forgot link, etc...

Can you provide me just the stylings for the inputs and the login_username

[code739]

you could try this one
<input type="text" name="password_txt" id="login_password_text" class="login_field" value="" onfocus="this.style.border='1px solid red';" onmouseout="this.style.border='1px solid black';"/>

[<M/>]

Your idea works too!