A random border is appearing on a search box

Question

So I have a search box on my page. On page load it looks like this:

However, after typing any text, and then deleting it, the box looks like this:

Upon entering new text, the border with go away and look like the original state.

I do not believe the CSS is altering it in any way as these events occur

.search {
  padding: 8px 15px;
  background: rgba(50, 50, 50, 0.2);
  border: 1px solid #dbdbdb;
}
.search:hover {
  background: rgba(0, 0, 0, .3);
}
.search:focus {
  background: rgba(0, 0, 0, 0);
}
.button {
  position: relative;
  padding: 6px 15px;
  left: -8px;
  border: 2px solid #207cca;
  background-color: #207cca;
  color: #fafafa;
  font-size: 12px;
  cursor: default;
}
.button:hover {
  background-color: #fafafa;
}

The border that appears is a style on many of the DIVs in the document however, they should not apply to the search box.

EDIT: This is not an example of the outline appearing. The outline only appears after the search box loses focus (I click elsewhere on the page). The outline will also disappear as text is being entered. EDIT #2: here's the relevant HTML:

    <td style="min-width:254px">
          <input type="text" placeholder="Search..." required class="search">
          <input type="button" value="Search" class = "button">
          <script>
              $('.button').click(search);
              $('.search').keypress(function(e)
              {
                  var code = (e.keyCode ? e.keyCode : e.which);
                  if(code == 13) 
                  {
                      search();

                  }
              });    
              function search()
              {
                  window.location.href = "country.html/?country=" + $('.search').val().toLowerCase();
              }
          </script>
      </td>

Are you using Chrome? http://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome?rq=1 — cyberbit, Jun 15 '16 at 15:40
What css framework are you using ? and browser ? And 'required' flag on the input ? Can you show us your HTML ? — Pogrindis, Jun 15 '16 at 15:43

score 0 · Answer 1 · answered Jun 15 '16 at 15:42

0

It seems it has border and box shadow on focus: Try adding below to css

.search:focus {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Also check if any other classes are getting appended after you delete text(e.g in case of angular ng-dirty)

answered Jun 15 '16 at 15:42

Don

1,334
1
10
18

According to the firefox inspect element, there aren't any other classes being added. There is a border there that I do want to have, a light grey one which is still there when the orange one appears – Alex McKinley Jun 15 '16 at 16:35

score 0 · Answer 2 · answered Jun 15 '16 at 15:42

You need to have outline: none;

Here is a little bit about the outline property so you know what it does and how to use it: LINK

.search {
  padding: 8px 15px;
  background: rgba(50, 50, 50, 0.2);
  border: 1px solid #dbdbdb;
}

.search:hover {
  background: rgba(0, 0, 0, .3);
}

.search:focus {
  background: rgba(0, 0, 0, 0);
  outline: none;
}

.button {
  position: relative;
  padding: 6px 15px;
  left: -8px;
  border: 2px solid #207cca;
  background-color: #207cca;
  color: #fafafa;
  font-size: 12px;
  cursor: default;
}

.button:hover {
  background-color: #fafafa;
}

<input class="search">
<button class="button">Search</button>

Unfortunately, that is not the solution. I tried adding it to no avail. I don't think its a focus thing as the orange border appears to stay even when tabbing focus away. — Alex McKinley, Jun 15 '16 at 16:36

A random border is appearing on a search box

2 Answers2