When cursor in textbox make it green border-CodePudding

In the following code I try to make the border green when the user is typing in keyboard, but the following does not work

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div><!DOCTYPE html>
<html>
  <head>
    <style>
      input[type="text"] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
      }

      input[type="text"]:hover {
        border: 2px solid yellow;
      }

      input[type="text"]:focus {
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <h2>CSS Textbox</h2>

    <input type="text" />
 
  </body>
</html>

You can see the code here https://codepen.io/jackee1234/pen/BaYjYKB

What's the right way to achieve that?

CodePudding user response：

your code is fine the issue is when you select the text field there is a outline showing it is selected which covers the green border to fix this just add outline: none; to your input box style i.e.

    input[type="text"] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        outline: none; //added here
      }

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div><!DOCTYPE html>
<html>
  <head>
    <style>
      input[type="text"] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        outline: none; //added here
      }

      input[type="text"]:hover {
        border: 2px solid yellow;
      }

      input[type="text"]:focus {
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <h2>CSS Textbox</h2>

    <input type="text" />
 
  </body>
</html>

CodePudding user response：

Just add outline property and give it a none value to the input focus like this,

input[type="text"]:focus {
        border: 2px solid green;
        outline:none; //outline causing this issue.
      }

CodePudding user response：

just add the following:

  input[type="text"]:focus-visible {
    outline: none;
  }