How to disable border if input is focused in Chrome/MS Edge?

Question

I create an input, but in Chrome and MS Edge it will show a ugly black borders/frame around the input if you click on that input. In Firefox the frame/border would not appear. How can I remove this frame/borders in Chrome/ MS Edge?

<!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>Document</title>
</head>

<body>

  <div id="EDT1"
    style="display: block; margin: 0px; padding: 0px; position: absolute; top: 15px; left: 15px; height: 26px; min-height: 26px; max-height: 26px; width: 200px; min-width: 200px; max-width: 200px; z-index: 183; background-color: transparent; visibility: visible; border-width: 0px; border-style: solid;">
    <input type="text" value="Text" title="" readonly=""
      style="display: block; margin: 0px; position: absolute; height: 26px; min-height: 26px; max-height: 26px; resize: none; border-width: 0px; font-family: Arial; font-size: 12pt; line-height: 12pt; color: rgb(0, 0, 0); cursor: text; background-color: transparent; left: 0px; top: -2px; width: 194px; min-width: 194px; max-width: 194px; padding: 2px 3px 0px; text-align: left;">
  </div>

</body>

</html>

Does [this](https://stackoverflow.com/questions/3397113/how-to-remove-focus-border-outline-around-text-input-boxes-chrome) answer your question? — Daweed, May 07 '21 at 06:22
Does this answer your question? [Google Chrome showing black border on focus state for button user agent styles](https://stackoverflow.com/questions/61992025/google-chrome-showing-black-border-on-focus-state-for-button-user-agent-styles) — Mo Shal, Jul 24 '23 at 14:51

score 0 · Accepted Answer · answered May 07 '21 at 06:19

0

Please add the following css:

input:focus{
  outline: none;
}

answered May 07 '21 at 06:19

The KNVB

3,588
3
29
54

score 0 · Answer 2 · answered May 07 '21 at 06:33

This will remove the default and add a border similar to the on on Firefox. Also, practice separation of structure from presentation.

<!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>Document</title>
  <style>
    #EDT1 {
        display: block; 
        margin: 0px; 
        padding: 0px; 
        position: absolute; 
        top: 15px; 
        left: 15px; 
        height: 26px; 
        min-height: 26px; 
        max-height: 26px; 
        width: 200px; 
        min-width: 200px; 
        max-width: 200px; 
        z-index: 183; 
        background-color: transparent; 
        visibility: visible; 
        border-width: 0px; 
        border-style: solid;
    }

    input {
        display: block; 
        margin: 0px; 
        position: absolute; 
        height: 26px; 
        min-height: 26px; 
        max-height: 26px; 
        resize: none; 
        border-width: 0px; 
        font-family: Arial; 
        font-size: 12pt; 
        line-height: 12pt; color: rgb(0, 0, 0); 
        cursor: text; 
        background-color: 
        transparent; 
        left: 0px; 
        top: -2px; 
        width: 194px; 
        min-width: 194px; 
        max-width: 194px; 
        padding: 2px 3px 0px; 
        text-align: left;
    }

    input:focus{
        outline: none;
        border: 1px solid #ccc;
    }
  </style>
</head>

<body>

  <div id="EDT1">
    <input type="text" value="Text" title="" readonly="">
  </div>

</body>
</html>

How to disable border if input is focused in Chrome/MS Edge?

2 Answers2