-3

Why do buttons and input have this unusual outline with black and grey borders? I can't tell if this is only my issue, but the border appears on buttons and also inputs. Here is my code and an image of my navbar:

.navbar-vert-spacer {
  height: 10px;
}

.main-nav-bar {
  border-radius: 25px;
  box-shadow: 2px 2px 8px #d4d4d4;
  height: 50px;
  width: 1800px;
  margin-left: 10px;
  margin-right: 10px;
}

.home-icon {
  height: 30px;
  text-align: center;
  padding: 10px;
  margin-left: 5px;
}

.search-bar {
  background: #D4D4D4;
  border-radius: 25px;
  height: 10px;
  width: 1710px;
  padding: 10px;
  margin-right: 8px;
  margin-top: 8px;
  float: right;
}
<div class="navbar-vert-spacer"></div>

<!-- NAVBAR -->

<div class="navbar">
  <div class="main-nav-bar">
    <a href="http://127.0.0.1:5000/">
      <img class="home-icon" src="static/home.ico">
    </a>
    <input type="text" placeholder="Search.." class="search-bar">
  </div>
</div>

<!-- NAVBAR -->

https://i.stack.imgur.com/y46Sg.png

Gerard
  • 15,418
  • 5
  • 30
  • 52
Elipsus
  • 3
  • 5

2 Answers2

0

Because border add default border-color & width

.search-bar {
  border: 0;
  outline: 0;
}
Satish Modha
  • 759
  • 1
  • 4
  • 8
  • does this get rid of the "selected" box that keyboard users can see when they press tab? – Elipsus Feb 08 '21 at 12:02
  • Yes Outline declare Tab focus on Element or Tag if you remove "outline:0" then the browser default takes an outline in inputs. (Some clients don't like the outline on the tag that's why I remove it.) – Satish Modha Feb 08 '21 at 12:24
0

chrome default styles

there are some styles applied by the browser itself. if you don't want to have this outline you can use

 .search-bar {
            outline:none
            }
scr2em
  • 974
  • 8
  • 17