브라우저와 같은 일부 브라우저 (예 : Chrome)에서 숫자 유형의 HTML 입력을 위해 렌더링하는 새로운 스핀 상자를 숨기는 일관된 방법이 있습니까? 위쪽 / 아래쪽 화살표가 나타나지 않도록 CSS 또는 JavaScript 방법을 찾고 있습니다.
<input id="test" type="number">답변
이 CSS는 웹킷 브라우저의 스핀 버튼을 효과적으로 숨 깁니다 (Chrome 7.0.517.44 및 Safari 버전 5.0.2 (6533.18.5)에서 테스트).
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}<input type="number" step="0.01" />인스펙터 (웹킷, Firefox 용 Firebug)를 사용하여 관심있는 요소와 일치하는 CSS 속성을 찾고 유사 요소를 찾을 수 있습니다. 이 이미지는 입력 요소 type = “number”에 대한 결과를 보여줍니다.
답변
Firefox 29는 현재 숫자 요소에 대한 지원을 추가하므로 다음은 웹킷 및 moz 기반 브라우저에서 스피너를 숨기는 스 니펫입니다.
input[type='number'] {
-moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}<input id="test" type="number">답변
짧은 답변:
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}<input type="number" />더 긴 답변 :
기존 답변에 추가하려면 …
Firefox :
Firefox의 현재 버전 에서 이러한 요소 에 대한 -moz-appearance특성 의 (사용자 에이전트) 기본값 은 number-input입니다. 이를 값으로 변경 textfield하면 스피너가 효과적으로 제거됩니다.
input[type="number"] {
-moz-appearance: textfield;
}경우에 따라 스피너를 처음 에 숨기고 호버 / 포커스에 표시 하기를 원할 수 있습니다 . (현재 Chrome의 기본 동작입니다). 그렇다면 다음을 사용할 수 있습니다.
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
-moz-appearance: number-input;
}<input type="number"/>크롬:
현재 Chrome 버전 에서 이러한 요소 에 대한 -webkit-appearance속성 의 (사용자 에이전트) 기본값 은 이미 textfield입니다. 스피너를 제거하기 위해, -webkit-appearance속성 값의 요구가 변경 될 none온 ::-webkit-outer-spin-button/의 ::-webkit-inner-spin-button의사 클래스 (그것은이다 -webkit-appearance: inner-spin-button기본적으로).
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}<input type="number" />그 밖으로 그것의 가치가 가리키는 margin: 0에서 마진을 제거하는 데 사용됩니다 나이가 크롬의 버전.
현재이 글을 쓰는 시점에서 ‘내부 스핀 버튼’의사 클래스의 기본 사용자 에이전트 스타일은 다음과 같습니다.
input::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button;
display: inline-block;
cursor: default;
flex: 0 0 auto;
align-self: stretch;
-webkit-user-select: none;
opacity: 0;
pointer-events: none;
-webkit-user-modify: read-only;
}답변
Apple의 모바일 Safari 코딩 경험 가이드에 따르면 다음을 사용하여 iPhone 브라우저에 숫자 키보드를 표시 할 수 있습니다.
<input type="text" pattern="[0-9]*" />pattern의는 \d*또한 작동합니다.
답변
input type="tel"대신 사용해보십시오 . 숫자가 표시된 키보드가 나타나며 스핀 상자가 표시되지 않습니다. JavaScript 또는 CSS 또는 플러그인이나 다른 것이 필요하지 않습니다.
답변
숫자를 입력 할 때 스피너를 제거하려면이 CSS 만 추가하십시오.
/* For Firefox */
input[type='number'] {
-moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}답변
이 문제와 input[type="datetime-local"]비슷한 문제가 발생했습니다.이 문제와 비슷합니다.
이런 종류의 문제를 극복 할 수있는 방법을 찾았습니다.
먼저 “DevTools-> 설정-> 일반-> 요소-> 사용자 에이전트 그림자 DOM 표시”를 통해 크롬의 그림자 루트 기능을 켜야합니다.
그런 다음 그림자 가있는 모든 DOM 요소를 볼 수 있습니다 ( 예 <input type="number">: 그림자가있는 DOM이있는 전체 요소는 다음과 같습니다).
<input type="number">
<div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
<div id="editing-view-port">
<div id="inner-editor"></div>
</div>
<div pseudo="-webkit-inner-spin-button" id="spin"></div>
</div>
</input>
그리고이 정보에 따르면 @Josh가 말한 것처럼 원치 않는 요소를 숨기도록 CSS를 작성할 수 있습니다.
