임의의 테두리가 검색 상자에 나타납니다.

Question

그래서 내 페이지에 검색 창이 있습니다. 페이지로드는 다음과 같습니다 그러나

, 텍스트를 입력하고 다음을 삭제 한 후, 박스는 다음과 같습니다

새로운 텍스트를 입력 할 때,이 국경은 사라지고 원래의 상태처럼 보입니다.

이러한 이벤트가

.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; 
} 

를 발생할 때 나는 CSS는 어떤 방법으로 그것을 변경됩니다 믿지 않는

그러나 문서의 div의 대부분에 스타일이 표시되는 테두리에는 적용되지해야 검색 창에

편집 : 이것은 나타나는 윤곽의 예가 아닙니다. 개요는 검색 상자가 포커스를 잃은 후에 만 ​​나타납니다 (페이지의 다른 곳을 클릭). 텍스트가 입력되면 개요도 사라집니다. 편집 # 2 :

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

Answer 1

초점 국경 및 상자 그림자가 보인다 : 여기 는 관련 HTML의 다른 클래스를 추가하기 경우

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

이 또한 확인 CSS를 아래 추가하십시오 텍스트를 삭제 한 후 (예를 들면 각 NG-더러운의 경우)

당신은 여기 outline: none;

이 필요

Answer 2

는이다 윤곽 속성에 대한 조금 당신은 어떻게 그것을 사용하는 무엇을 알 수 있도록 : 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>