크롬에서 텍스트 상자에서 테두리를 제거하는 방법

Question

크롬이 텍스트 상자에 추가하는 테두리를 제거하고 싶습니다. 여기에 이미 시도한 HTML과 CSS가 있습니다.

HTML :

<input id="searchbar" type="search" placeholder="Search" /> 

CSS :

input[type=search], 
input[type=search]:hover, 
input[type=search]:focus, 
input[type=search]:active 
{ 
    border: 0; 
    outline: none; 
    outline-offset: 0; 
    background-color:transparent 
} 

제발 조언. IE에는 테두리가 추가되지 않았고 텍스트 상자는 완벽하게 잘 보입니다.

업데이트 : 이미지를 부착

Answer 1

-webkit-appearance:none;을 추가하면 해결됩니다. 이것은 WebKit의 양식 컨트롤에 유용한 해킹입니다.

Answer 2

이 문제를 해결해야한다 outline:none를 추가 (I는 나뿐만 아니라 크롬에서 IE10에 표시되는 내용 달성 할). 귀하의 사이트의 URL을 제공하십시오.

Answer 3

@ int32_t와 @ soheil의 해결책을 모두 시도했습니다. Chrome과 Safari는 동일한 웹킷 엔진을 사용하지만 사파리와 다른 변종 IOS, ipad & 아이폰은 조금 다르게 행동합니다.

는 따라서

-webkit-appearance:none; 

크롬에 근무하지만 사파리

에

outline:none 

는이

를 사용할 수있는 안전한 편이 될

사파리가 아닌 크롬

에 근무

.noBorderNoHeighlight{ 
    border: none;  /* Good browsers universal rule */ 
    outline: none;  /* safari and its variants */ 
    outline-offset: 0; /* IE and its variants */ 
    -webkit-appearance:none; /* Chrome and its variants */ 
}