html - A random border is appearing on a search box -

so have search box on page. on page load looks this:

however, after typing text, , deleting it, box looks this:

upon entering new text, border go away , original state.

i not believe css altering in way 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 appears style on many of divs in document however, should not apply search box.

edit: not example of outline appearing. outline appears after search box loses focus (i click elsewhere on page). outline disappear text being entered. edit #2: here's 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> 

it seems has border , box shadow on focus: try adding below css

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

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