ADVERTISEMENT
ADVERTISEMENT

How to remove the focus border (outline) around text input boxes in Chrome?

Example of :focus selector to remove the focus border (outline) around text input boxes in Chrome.
Submitted by Shahnail Khan, on April 11, 2022

We use the :focus selector to select an element that is currently targeted by the Keyboard. By default, the black outline is defined around an element that accepts keyboard events like text input boxes when we use the: focus selector. We can see this in the Chrome browser. What if we don’t want that outline?

We can remove that outline by simply applying CSS outline property and assigning its property value to none.

Example:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>focus</title>
   </head>
   
   <style>
      #Age:focus{
      outline: none;/* This will remove outline when user hovers over the 2nd box*/
      }
   </style>
   
   <body>
      <div class="container">
         <h2>Enter your name 
            <input type="text" placeholder="Text only">
         </h2>
         <h2 class="firstclass">
            Enter your age
            <input type="number"placeholder="Numbers only" id="Age">
         </h2>
      </div>
   </body>
</html>

Output:

Example | remove the focus border

When the user clicks on the second box, no outlines will be defined around that input box as we have set the value of outline property to none for "Age" Id. By default, there's an outline defined around the first box and it will be visible when the user clicks on that box.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.