FF의 선택 상자에서 윤곽선 제거

선택 요소에서 선택한 항목을 둘러싼 점선을 제거 할 수 있습니까?

outlineCSS에 속성 을 추가하려고 시도했지만 적어도 FF에서는 작동하지 않았습니다.

<style>
   select { outline:none; }
</style>

업데이트
개요를 제거하기 전에이 내용을 읽으십시오.
http://www.outlinenone.com/

나는 해결책을 찾았지만 모든 해킹의 어머니이며 다른 더 강력한 솔루션의 출발점이되기를 바랍니다. 단점 (내 생각에 너무 큰)을 지원하지 않는 브라우저이다 text-shadow하지만 지원 rgba이 라이브러리를 사용하지 않는 (IE 9) 등 모더 나이저로 텍스트를 렌더링하지 않습니다가 (단지 이론을 테스트하지).

Firefox는 텍스트 색상을 사용하여 점선 테두리의 색상을 결정합니다. 그러니 만약 그렇다면 ...

select {
  color: rgba(0,0,0,0);
}

Firefox는 점선 테두리를 투명하게 렌더링합니다. 하지만 물론 텍스트도 투명합니다! 그래서 우리는 어떻게 든 텍스트를 표시해야합니다. text-shadow구조에 온다 :

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

오프셋과 블러가없는 텍스트 그림자를 넣어 텍스트를 대체합니다. 물론 이전 브라우저는 이것에 대해 이해하지 못하므로 색상에 대한 대체를 제공해야합니다.

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

IE9가 등장 할 때입니다. rgba텍스트 그림자 는 지원 하지 않지만 빈 선택 상자가 나타납니다. text-shadow탐지 기능 이있는 Modernizr 버전을 다운로드 하고 ...

.no-textshadow select {
  color: #000;
}

즐겨.

글쎄요, Duopixel의 대답 은 완벽합니다. 한 걸음 더 나아가면 방탄으로 만들 수 있습니다.

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

이제 Firefox에서만 유효하며 선택한 옵션 주변의 못생긴 점선이 사라졌습니다.

다음은 Firefox 선택 상자의 스타일 문제를 해결하기위한 솔루션의 공동 작업입니다. 이 CSS 선택기를 일반적인 CSS 재설정의 일부로 사용하십시오.

클래스는 질문에 따라 개요를 제거하지만 배경 이미지도 제거합니다 (일반적으로 사용자 지정 드롭 다운 화살표를 사용하고 Firefox 시스템 드롭 다운 화살표는 현재 제거 할 수 없기 때문에). 드롭 다운 이미지 이외의 다른 항목에 배경 이미지를 사용하는 경우 선을 제거하기 만하면됩니다.background-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

이것은 모든 Firefox 버전을 대상으로합니다.

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

동일한 스타일 시트를 사용하는 사이트의 다른 페이지에 개요를 표시하려는 경우! important를 제거 할 수 있습니다.

일반적으로 양식 컨트롤은 그 정도의 정확도로 스타일을 지정할 수 없습니다. 모든 컨트롤에서 합리적인 범위의 속성을 지원하는 브라우저는 없습니다. 이것이 바로 이미지 및 기타 HTML 요소로 컨트롤을 "위조"하고 코드로 원래 기능을 에뮬레이트하는 무수한 JavaScript 라이브러리가있는 이유입니다.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

<select onchange="this.blur();">

이것을 사용하면 목록에서 항목을 선택할 때까지 테두리가 유지됩니다.

다음 중 하나를 시도하십시오.

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

참고

여기에 해결책이 있습니다

:focus {outline:none;}
::-moz-focus-inner {border:0;}

Firefox 선택 가능한 모든 태그에서 윤곽선 / 점선 테두리를 제거합니다.

스타일 시트에 다음 코드 줄을 넣으십시오.

*:focus{outline:none !important;}   

테두리 스타일 추가 : CSS에서 선택한 항목에 없음 .

select {
border-style: none; }

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

100 % 작업

이렇게하면 select요소와 개요 에서 포커스가 제거됩니다 .

$("select").click(function(){
    $(this).blur();
});

이것은 다른 브라우저의 단점이없는 것은 아닙니다. 사용자가 사용중인 브라우저를 확인하는 것이 좋습니다.

if (FIREFOX) {
    //implement the code
}