how to add border around input

Question

hwoarang69 11 Newbie Poster

13 Years Ago

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

html-css user-interface web-design

Edited 13 Years Ago by hwoarang69

3 Contributors
10 Replies
199 Views
4 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by <M/>

Dani AI

Generated 7 Months Ago

Quick diagnosis — two common causes here: a browser-provided focus/autofill highlight, or your existing CSS rule being more specific than the input:focus rule you added. From your pasted stylesheet I can see a selector like #login .field already sets border and box-shadow; a plain input:focus has lower specificity and therefore won't win. That explains why your input:focus { border: 1px solid red } looked like it had no effect. It also matches 's comment about visual testing and 's inline fix (which works because inline styles outrank stylesheet rules).

How to check quickly

Open DevTools, select the input, then the Computed/Styles pane and look for outline, box-shadow, or background-color coming from :-webkit-autofill / user agent rules.
Try the page in another browser or an incognito window to rule out autofill.
These will tell you whether the yellow is an outline, a box-shadow, or an autofill background.

Practical fix (keeps keyboard accessibility)

Target the same specificity and use a ring via box-shadow (no layout jump, works nicely). Use :focus-visible to retain the native focus ring for keyboard users and fall back to :focus for older browsers.

/* prefer this when supported (shows custom ring only for keyboard focus) */
.login_field:focus-visible {
  border-color: #c00;
  box-shadow: 0 0 0 3px rgba(204,0,0,0.35);
}

/* fallback for browsers without :focus-visible */
.login_field:focus {
  border-color: #c00;
  box-shadow: 0 0 0 3px rgba(204,0,0,0.35);
}

Notes and caveats

Avoid removing the focus ring globally (accessibility issue). Use :focus-visible or replace it with an equally visible alternative.
If the yellow is from Chrome autofill, override :-webkit-autofill (inspect to confirm) rather than hiding focus styles.
As a last resort, increase selector specificity (e.g. #login .field:focus) or use !important only if you cannot change the stylesheet order.

This approach addresses the specificity problem you hit, keeps the UI consistent, and preserves keyboard accessibility while giving you the red focus indicator you wanted.

All 10 Replies

<M/> 170 Why so serious?

13 Years Ago

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

<M/> 170 Why so serious?

13 Years Ago

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

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

<M/> 170 Why so serious?

13 Years Ago

unless there is an interference

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

<M/> 170 Why so serious? Featured Poster · Answer 1 · 2012-11-20T00:52:07+00:00

<M/> 170 Why so serious?

13 Years Ago

Quick question... are you using a mac?

<M/> 170 Why so serious? Featured Poster · Answer 2 · 2012-11-20T00:52:47+00:00

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

hwoarang69 11 Newbie Poster · Answer 3 · 2012-11-20T00:55:31+00:00

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 11 Newbie Poster · Answer 4 · 2012-11-20T01:13:45+00:00

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/> 170 Why so serious? Featured Poster · Answer 5 · 2012-11-20T01:24:51+00:00

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 17 Posting Whiz in Training · Answer 6 · 2012-11-20T02:05:08+00:00

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/> 170 Why so serious? Featured Poster · Answer 7 · 2012-11-20T05:17:11+00:00

<M/> 170 Why so serious?

13 Years Ago

Your idea works too!

how to add border around input

Dani AI

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers