Firefox의 범위 입력 요소에서 점선 윤곽선 제거

Firefox의 범위 입력 요소에서 점선 윤곽선 제거

---

Firefox는 버전 23부터 기본적으로 <input type="range">요소를 지원 하지만 점선을 제거하는 방법을 알 수 없습니다. 다음 CSS는 효과가 없습니다.

input[type='range'], 
input[type='range']:focus, 
input[type='range']:active, 
input[type='range']::-moz-focus-inner, 
input[type='range']:-moz-focusring {
    border: 0;
    outline: none;
}

누구든지 Firefox 에서이 문제를 해결하는 방법을 알고 있습니까?

예 : http://jsfiddle.net/pF37g/

---

불행히도 할 수 없습니다! (업데이트, 이제 가능)

Firefox의 버그는 소스 기반 자체 수정하는 것 외에는 존재하지 않는 해결 방법도 없습니다 (아래 참조).

또한 이 작업을하고있는 Jonathan Watt의 블로그를 참조하십시오 .

기기 문제 :

• 기본 CSS 스타일 모양은 여전히 ​​작업이 필요하며 기본 테마 (슬라이더에 될 운영 테마의 모양을 제공)는 계속해서 제공 될 예정입니다.

이 같은 문제에 대한 그의 블로그 댓글에 대한 답변에서 다음과 같이 사실.

지금은 할 수 없습니다. 죄송합니다. 이를 가능하게하기 위해 버그 932410 을 출시 했습니다 .

글을 쓰는 순간에는 이에 대한 진전이없는 "보이며 언제 공식적인 수정이 가능할지는 알려지지 않습니다.

최신 정보

이 답변이 게시 된 이후 버그가 수정되었습니다. 이제 사용할 수 있습니다 (다른 언급에서 언급 한 것을 완전성을 위해 여기에 포함).

input[type=range]::-moz-focus-outer {
    border: 0;
    }

---

그것은 수있는 파이어 폭스의 새 버전 수행 할 수 있습니다. 언급 한 바와 같이 여기 ,이 버그가 수정됩니다. 따라서 외부 점선에서 숨길 수 있습니다. 이렇게하려면 다음 ::-moz-focus-outer과 같이의 설정을 합니다.

input[type=range]::-moz-focus-outer {
    border: 0;
}

다음은 작업 예제입니다 : http://jsfiddle.net/n2dsc/1/

웹킷 브라우저 에서이 -webkit-appearance: none;설정 되면 바깥 줄이 나타납니다 . 이를 제거하기 위해 :focus다음과 같이의 개요를 없음으로 설정 합니다.

input[type=range]:focus {
    outline: none;
}

다음은 작업 예입니다. http://jsfiddle.net/8b5Mm/1/

---

Ken이 이미 지적했듯이 윤곽선을 제거 할 방법은 없습니다. 그러나 부모 요소의 배경색을 알고있는 경우 윤곽선을 "숨기기"해결 방법이 있습니다. 흰색 배경을 가정하면 다음 CSS가 점선 윤곽선을 숨 깁니다.

input[type=range] {
    border: 1px solid white;
    outline: 2px solid white;
    outline-offset: -1px;
}

업데이트 된 예 : http://jsfiddle.net/9fVdd/15/

---

래핑 요소 (이미 래핑 LI또는 P)를 사용할 수있는 경우 FireFox 전용 CSS를 사용하여 입력을보기 외부 배치하고보기에서 트랙 / 썸을 재배치 할 수 있습니다.

• 참고 1- 사용하지 않음 translateX-FireFox는 실제로 엄지 손가락을 슬라이드하는 데 사용하지 않습니다.translateY
• 참고 2- 키보드 탐색으로 테스트해야합니다. 점선이 표시 할 항목 입력 을 가능한 한 최소한 으로 만 이동해야합니다 . 너무 멀리 배치하면 ( translateY(-1000em)) 키보드 탐색의 유용성이 죽습니다 .

여기 있습니다.

HTML

<span class="range-wrap"><input type="range" /></span>

CSS

.range-wrap {
    overflow: hidden;
}
input[type='range'] {
    -moz-transform: translateY(-3em);
}
input[type='range']::-moz-range-track {
    -moz-transform: translateY(3em)
}
input[type='range']::-moz-range-thumb {
    -moz-transform: translateY(3em);
}

http://jsfiddle.net/pF37g/98/

---

점선은 문제가있는 입력 요소가 선택 표시하는 브라우저의 방법입니다. 할 수있는 일은 tabIndex-1 로 설정 하면 input요소가 탭에 점점 늘어나고 맞추지 못해 결과적으로 개요가 표시되지 않습니다.

<input class="size" type="range" tabIndex="-1" name="size" min="1" max="6" value="6"></input>

그러나 이렇게하면 키보드 접근성을 잃게됩니다. input요소 키보드에 액세스 할 수 있는 것이 좋습니다 .

다음은 바이올린입니다. http://jsfiddle.net/pF37g/14/

---

사용자 정의 스타일이 적용되면 input[type='range']Firefox는 다른 모델 (베타) 을 사용하여 범위 입력을 렌더링합니다.

여기에서 두 가지 다른 모델을 볼 수 있습니다.

http://jsfiddle.net/pF37g/75/

현재 저는 outline: 0;Firefox 27.0 부터 준수하기 위해 Firefox에서 사용자 정의 CSS 스타일 입력 범위 상자를 가질 수 있다고 생각하지 않습니다.

---

완료하려면 : 버그가 수정되었으며 현재 다음과 같이 작동합니다.

input[type=range]::-moz-focus-outer { border: 0; }

모든 입력 태그에서 모든 윤곽선을 제거하려면 다음을 사용하십시오.

input::-moz-focus-inner, input::-moz-focus-outer { border: none; }

출처 : https://bugzilla.mozilla.org/show_bug.cgi?id=932410#c7

---

당신은 할 수 없습니다. 파이어 폭스의 버그가된다.

범위 요소에 대해 두 개의 윤곽선을 만듭니다. 하나는 CSS 설정에 의해 영향을받을 수 있고 다른 하나는 어떠한 조작에도 저항 할 수 있습니다.

문제를 표시하기 위해 개요를 표시하도록 설정했습니다. input[type='range']:focus { outline: 5px solid green; }

여기에서 볼 수 있습니다.

http://jsfiddle.net/pF37g/97/

---

mozilla의 구성 섹션에 대한 연구가 거의 없습니다.

 :-moz-any-link:focus {
    outline: none;
 }
 a, a:active, a:visited, a:hover {
    outline: 0;
}

그때

:focus {
   outline: none;
}

그때

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

---

여기에 해결책이 있습니다

:focus {
    outline:none;
}

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

참고 URL : https://stackoverflow.com/questions/18794026/remove-dotted-outline-from-range-input-element-in-firefox