숨기기/표시 선택 화살표

내 검색에도 불구하고 화살표를 제거하거나 숨기지 만 마우스를 올리면 표시되지 않는 것과 관련된 주제를 발견했습니다.숨기기/표시 선택 화살표

목표는 모든 최신 주요 브라우저, Edge, Chrome 및 IE 11에 대해 HTML 선택 화살표를 숨기고 있지만 마우스를 가리킬 때 표시합니다.

지금은 IE 11에서 완벽하게 작동하도록 만들었지 만 Chrome 및 Edge에서는 제대로 작동하지 않습니다. 이 코드를 변경하여 브라우저를 교차시키기 위해 무엇을 추가해야하는지에 대한 통찰력이 있습니까?

select::-ms-expand { 
 
    display: none; 
 
} 
 

 
select { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
} 
 

 
select:hover { 
 
    -webkit-appearance: menulist; 
 
    -moz-appearance: menulist; 
 
} 
 
select:hover::-ms-expand { 
 
    display: block; 
 
}

<select> 
 
    <option>Marc Roussel</option> 
 
    <option>Gilles Lavoie</option> 
 
    <option>Roger Maheu</option> 
 
</select>

출처

2016-10-12 Marc Roussel

사용 -webkit-appearance: menulist. 최신 브라우저의 경우 또는 appearance: none :

전체 목록은 http://trentwalton.com/2010/07/14/css-webkit-appearance/을 참조하십시오.

는

출처

2016-10-12 12:43:02 Xenos

이 50 %의 작업이다 IMO, 사용자의 관점에서, 그것은 구체적이고 놀라운 뭔가 뭔가 표준 및 "정상"을 설정하는 이상한 요구 사항입니다]. 다른 브라우저가 스타일을 유지하는 동안 크롬이 전체 텍스트 상자 부분을 변경하는 이유는 무엇입니까? 모든 주요 브라우저에서 모든 것이 동일해야합니다. 이 요구 사항은 그리드에 넣기위한 것입니다. 이 컨트롤을 가진 열의 모든 행에이 화살표가 없길 원합니다. –

'-webkit-'규칙은 웹킷 브라우저 (Opeara, Chrome)에만 적용됩니다. 다른 것은 영향을받지 않습니다. 나는 여기 가장자리가 없기 때문에 그 브라우저를 확인할 수 없다. 휴대 전화/태블릿이 기기별로 화살표를 표시하지 않는다는 것을 알면 그런 눈금을 가질 수 있습니다. – Xenos

예 참으로 이것은 제가 알고있는 것입니다 -webkit- 또 다른 것은 IE 11에서 선택이 클릭되었을 때 문서의 다른 부분을 클릭하면 화살표가 숨겨진 완벽하지만 가장자리에 menulist 솔루션은 다른 곳을 클릭 한 후에도 화살표를 유지하게합니다 –

숨기기/표시 선택 화살표

답변

관련 문제