1,105,177 Community Members

how to add border around input

Member Avatar
hwoarang69
Posting Pro
572 posts since Feb 2012
Reputation Points: -4 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 9 [?]
 
0
 
 <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.

Member Avatar
<M/>
Industrious Poster
4,473 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
1
 

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

Member Avatar
<M/>
Industrious Poster
4,473 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
1
 

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

input:focus
{ 
border: 1px solid yellow;
}
Member Avatar
<M/>
Industrious Poster
4,473 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
1
 

unless there is an interference

Member Avatar
<M/>
Industrious Poster
4,473 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
1
 

Quick question... are you using a mac?

Member Avatar
<M/>
Industrious Poster
4,473 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
0
 

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

Member Avatar
hwoarang69
Posting Pro
572 posts since Feb 2012
Reputation Points: -4 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 9 [?]
 
0
 

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.

Member Avatar
hwoarang69
Posting Pro
572 posts since Feb 2012
Reputation Points: -4 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 9 [?]
 
0
 

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;
    }
Member Avatar
<M/>
Industrious Poster
4,473 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
1
 

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

Question Answered as of 1 Year Ago by <M/>
Member Avatar
code739
Posting Whiz in Training
213 posts since May 2012
Reputation Points: 17 [?]
Q&As Helped to Solve: 30 [?]
Skill Endorsements: 6 [?]
 
0
 

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';"/>

Member Avatar
<M/>
Industrious Poster
4,473 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
0
 

Your idea works too!

You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article