반응형
"숫자"를 입력 할 때 항상 위쪽 / 아래쪽 화살표를 표시 할 수 있습니까?
입력 "숫자"필드에 대해 항상 위 / 아래 화살표를 표시하고 싶습니다. 이것이 가능한가? 지금까지 운이 없었습니다 ...
http://jsfiddle.net/oneeezy/qunbnL6u/
HTML :
<input type="number" />
CSS :
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: "Always Show Up/Down Arrows";
}
Opacity 속성을 사용하여 최소한 Chrome에서이 작업을 수행 할 수 있습니다.
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
위에서 언급했듯이 이것은 Chrome에서만 작동합니다. 따라서 다른 브라우저에 대한 대체없이이 코드를 야생에서 사용하는 데주의하십시오.
다른 브라우저에서 동일한 모양을 얻으려면 플러그인 / 위젯을 사용하거나 직접 빌드해야 할 수 있습니다. 기본 브라우저는 모두 숫자 스피너를 다르게 구현하는 것 같습니다.
스타일링과 관련하여 훨씬 더 다양한 기능을 제공하는 jQuery UI의 스피너 위젯을 사용해보십시오 .
<p>
<label for="spinner">Select a value:</label>
<input id="spinner" name="value" />
</p>
$("#spinner").spinner();
반응형
'IT TIP' 카테고리의 다른 글
SCSS / SASS : 쉼표로 구분하여 클래스 목록을 동적으로 생성하는 방법 (0) | 2021.01.06 |
---|---|
Groovy에서 @Delegate, @Mixin 및 Traits의 차이점은 무엇입니까? (0) | 2021.01.06 |
구조체의 특성에 대한 참조 (0) | 2021.01.06 |
'\ 0'과 NULL을 같은 의미로 사용할 수 있습니까? (0) | 2021.01.06 |
목록을 Pandas 데이터 프레임 열로 변환 (0) | 2021.01.06 |