CODEWITHSUNDEEP
htmlcsssearch-box
user6768630
user6768630

Reputation:

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

.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?

Upvotes: 0

Views: 1037

Answers (2)

prajeesh
prajeesh

Reputation: 2382

Adding outline as none will fix the issue.

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

Upvotes: 1

Hitesh Misro
Hitesh Misro

Reputation: 3461

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>

Upvotes: 1

Related Questions