初次用HTML#CSS写搜索框遇到的问题

img


初次写搜索框，当点击搜索框时，搜索颜色就变成了黑色，这是为什么？该如何解决？

img


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="keyword" content="HTML">
    <meta name="author" content="唐增友">
    <title>搜索框</title>
    <style>
        .father {
            background-color:RGB(255, 255, 255);
            width:533px;
            height:45px;
            border-radius:34px;
            border-style: solid;
            border-color:olivedrab;
        }
        input {
            width:406px;
            height: 23px;
            margin: 8px 8px 8px 21px;
            border:0;
            color:darkgray;
        }
        button,i {
            background-color:white;
            border:none;
            font-family:"宋体",serif;
            font-size:16px;
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="father">
        <input type="text" value="搜索内容">
        <button><i>百度一下</i></button>
    </div>
</body>
</html>

这是input的默认css，被聚焦之后添加了一层边框outline
可以设置input { outline: none; }

<!DOCTYPE html>

<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style>
      input {
        outline: none;
      }
    </style>
  </head>
  <body>
    <input type="text" />
  </body>
</html>

在input加一个outline:none