单击文本框时如何删除多余的边框？

Question

.search-box-border{
  margin-left:100px;
  margin-top: 23px;
}
.search-box{
  border-radius: 1rem;
  border-color:green;
}
li{
  list-style-type:none;
}

<li class="search-box-border">
  <form role="search" >
    <input type="text" placeholder="Search..." class="search-box">
  </form>
</li>

在上面的代码中，我试图创建一个 border-color 绿色的文本框。但我遇到了一些问题，我想解决这个问题。

我创建了带有绿色边框的文本框，但显示为半黑半绿（可能是阴影），我想删除它。
当点击框时出现一个额外的灰色边框，我想去掉那个（可能是文本框的剩余部分），我怎样才能解决这个问题？

Answer 1

替换

border-color:green;

与

border: 1px solid green;

.search-box-border{
  margin-left:100px;
  margin-top: 23px;
}
.search-box{
  border-radius: 1rem;
  border: 1px solid green;
  outline: none;
}
li{
  list-style-type:none;
}

<li class="search-box-border">
  <form role="search" >
    <input type="text" placeholder="Search..." class="search-box">
  </form>
</li>

Answer 2

将大纲添加为 none 将解决此问题。

.search-box {
    border-radius: 1rem;
    outline: none;
    border-color: green;
}

单击文本框时如何删除多余的边框？

How can i remove the extra border when click on the text-box?

html

css

search-box