Remove border around the inputs (Chrome, Safari)

Posted by | February 23, 2012 | CSS, Web Development | 3 Comments
safari-vs-chrome

When an input element set to focus in WebKit browsers like Safari and Chrome, the browser will put a blurry blue/yellow border around it.

This could be confusing and could make your design look different. To disable this we can use the following css.

/* remove border around all input elements */
input:focus {
    outline: none;
}

/* remove border around all textarea elements */
textarea:focus {
    outline: none;
}

/* remove border around all select elements */
select:focus {
    outline: none;
}

/* remove border around all input,textarea and select elements */
input:focus, textarea:focus, select:focus {
    outline: none;
}

/* remove border around all elements */
:focus {
    outline: none;
}
avatar

About Farid

Creative web developer/designer, big fan of HTML5, CSS3 and client-side development. Software developer at Allegra Strategies London.

  • Yılmazcan DALKIRAN

    thanks… most of people don’t know this solution.

  • Jen

    Thank you for this!

  • Mahbub Alam

    Thanks…