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

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>

In the above code I'm trying to create a text-box with a border-color of green .but I faced some problems and i would like to resolve that.

1. I created the text box with a green border,but which is displayed as half black and half green(probably shadow),i want to remove this.

2. when click on the box there appear one extra border with ash colour,i want remove that one (probably the remains of the text-box), how can i fix this?

Answer 1

Replace

border-color:green;

with

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>