Opera의 input [type =“number”]에서 화살표를 제거하는 방법

Opera의 input [type =“number”]에서 화살표를 제거하는 방법

---

이 질문에는 이미 답변이 있습니다.

• HTML5 숫자 입력 스핀 상자를 숨길 수 있습니까? 답변 14 개

특정 상황에서 편리 하게이 화살표를 제거하려고합니다.

그러나 내용이 순수한 숫자라는 브라우저의 인식을 유지하고 싶습니다. 따라서이를 변경하는 것은 input[type="text"]허용되지 않는 솔루션입니다.

---

이제 Opera는 웹킷을 기반으로하므로이 질문은 다음과 같습니다. HTML5 숫자 입력의 스핀 상자를 숨길 수 있습니까?

---

나는 간단한 CSS를 사용하고 있으며 그것들을 제거하고 잘 작동하는 것 같습니다.

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

<input type="number" step="0.01"/>

CSS Tricks의이 튜토리얼은 자세하게 설명하고 스타일을 지정하는 방법을 보여줍니다.

---

이 화살표는 Shadow DOM의 일부이며 기본적으로 페이지에서 숨겨져있는 DOM 요소입니다. 이 아이디어를 처음 접 한다면 여기 에서 좋은 입문을 읽을 수 있습니다 .

대부분의 경우 Shadow DOM은 시간을 절약하고 좋습니다. 그러나이 질문과 같이 수정하려는 인스턴스가 있습니다.

올바른 선택기를 사용하여 Webkit에서이를 수정할 수 있지만 아직 개발 초기 단계에 있습니다. Shadow DOM 자체에는 아직 통합 선택기가 없으므로 웹킷 선택기는 독점적입니다 ( -webkit다른 경우처럼 을 추가하는 것만은 아닙니다 ).

이 때문에 Opera가 아직 이것을 추가하지 않은 것 같습니다. 그러나 Opera Shadow DOM 수정에 대한 리소스를 찾는 것은 쉽지 않습니다. 몇 신뢰할 수없는 인터넷 소스 내가 모든 말을 발견하거나 한이 오페라는 현재 그림자 DOM 조작을 지원하지 않는 것이 좋습니다.

나는 잠자리에서 그것을 찾으려고 노력하면서 오페라 웹 사이트를 통해 약간의 시간을 보냈다. 이 문제에 대한 침묵과 Shadow DOM + Shadow DOM 조작의 개발 특성으로 인해 지금까지는 Opera에서 할 수 없다는 것이 안전한 결론 인 것 같습니다.

---

방법이 없다.

이 질문은 기본적으로 복제본입니다. Chrome 및 Opera에 표시되는 새로운 HTML5 스핀 박스 컨트롤을 숨기는 방법이 있습니까? 그러나 동기 부여가 주어지기 때문에 전체 복제본이 아닐 수도 있습니다.

목적이 "순수하게 숫자 인 컨텐츠에 대한 브라우저의 인식"인 경우 실제로 의미하는 바를 고려해야합니다. 화살표 또는 스피너는 경우에 따라 숫자 입력을보다 편안하게 해주는 일부입니다. 다른 부분은 내용이 유효한 숫자인지 확인하고 HTML5 입력 향상을 지원하는 브라우저에서는 pattern속성 을 사용하여이를 수행 할 수 있습니다 . 이 속성은 세 번째 입력 기능, 즉 나타날 수있는 가상 키보드의 유형에도 영향을 줄 수 있습니다.

예를 들어, 입력 값이 정확히 5 자리 여야하는 경우 (일부 국가에서는 우편 번호와 같이) <input type="text" pattern="[0-9]{5}">적절할 수 있습니다. 물론 처리 방법에 따라 구현에 따라 다릅니다.

참고 URL : https://stackoverflow.com/questions/13107118/how-to-remove-the-arrows-from-inputtype-number-in-opera