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.

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

Hitesh Misro · Accepted Answer · 2016-09-20T06:52:38.973

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>

edited Sep 20 '16 at 06:52

answered Sep 20 '16 at 06:42

Hitesh Misro

3,397
1
21
50

it removes the first issue..,i wish you can also fix the second issue too. – Sep 20 '16 at 06:44
when click on the box there appear one more border with ash colour,i want remove that one. – Sep 20 '16 at 06:47
1

I'm not getting any border on click.. which browser are you using? – Hitesh Misro Sep 20 '16 at 06:49
1

May be this issue ? http://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome .. use `outline: none;` – cjmling Sep 20 '16 at 06:50
chrome,are you don't see an ash colour border?,it appears when click on the text box – Sep 20 '16 at 06:51
1

@White Maskers I guess you're facing the one @cjmling has suggested. Check my answer now. You just have to add this part of the code `outline: none;` to get after that. – Hitesh Misro Sep 20 '16 at 06:54

score 1 · Answer 2 · answered Sep 20 '16 at 07:00

1

Adding outline as none will fix the issue.

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

answered Sep 20 '16 at 07:00

prajeesh

2,202
6
34
59

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

2 Answers2