programing

입력 유형 = 숫자 스타일링

nasanasas 2020. 12. 25. 10:06
반응형

입력 유형 = 숫자 스타일링

<input type="number">CSS 에서 내부 "위쪽 화살표"와 "아래쪽 화살표"에 스타일을 적용 할 수 있습니까? 위쪽 화살표의 배경을 파란색으로, 아래쪽 화살표의 배경을 빨간색으로 변경하고 싶습니다. 어떤 아이디어?

내부 화살표 스타일 지정

업데이트 17/03/2017

원래 솔루션은 더 이상 작동하지 않습니다. 스피너는 그림자 돔의 일부입니다. 지금은 크롬에서 숨기려면 다음을 사용하십시오.

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
<input type="number" />

또는 항상 표시하려면 :

input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
}
<input type="number" />

다음을 시도해 볼 수 있지만 Chrome에서만 작동 합니다 . 

input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
    width:8px;
    color: #333;
    text-align:center;
    position:relative;
}

input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
    content: "^";
    position:absolute;
    right: 0;
}

input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
}

input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
}
<input type="number" />

모질라

input[type=number] { 
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0; 
}

Chrome 용

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

@LcSalazar의 답변을 약간 수정했습니다 ... 기본 버튼의 배경이 Firefox, Chrome 및 Opera (Safari에서 테스트되지 않음) 모두에서 여전히 볼 수 있기 때문에 여전히 완벽하지 않습니다. 그러나 화살표를 클릭하면 여전히 작동합니다.

메모:

  • 추가 pointer-events: none;하면 겹치는 버튼을 클릭 할 수 있지만 마우스를 올려 놓은 상태에서는 버튼의 스타일을 지정할 수 없습니다.
  • 화살표는 Edge에 표시되지만 Edge는 화살표를 사용하지 않기 때문에 작동하지 않습니다. 입력을 지우려면 "x"만 추가합니다.

.number-wrapper {
  position: relative;
}

.number-wrapper:after,
.number-wrapper:before {
  position: absolute;
  right: 5px;
  width: 1.6em;
  height: .9em;
  font-size: 10px;
  pointer-events: none;
  background: #fff;
}

.number-wrapper:after {
  color: blue;
  content: "\25B2";
  margin-top: 1px;
}

.number-wrapper:before {
  color: red;
  content: "\25BC";
  margin-bottom: 5px;
  bottom: -.5em;
}
<span class='number-wrapper'>
    <input type="number" />
</span>

유사한 개념을 사용하지만 의사 클래스 대신 div를 사용하여 다른 답변과 약간 다릅니다.

input {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 50px;
  height: 20px;
  padding: 0px;
  font-size: 14pt;
  border: solid 0.5px #000;
  z-index: 1;
}

.spinner-button {
  position: absolute;
  cursor: default;
  z-index: 2;
  background-color: #ccc;
  width: 14.5px;
  text-align: center;
  margin: 0px;
  pointer-events: none;
  height: 10px;
  line-height: 10px;
}

#inc-button {
  left: 46px;
  top: 10.5px;
}

#dec-button {
  left: 46px;
  top: 20.5px;
}
<input type="number" value="0" min="0" max="100"/>
<div id="inc-button" class="spinner-button">+</div>
<div id="dec-button" class="spinner-button">-</div>

미친 아이디어 ...

일부 의사 요소를 가지고 놀 수 있고 CSS 콘텐츠 16 진수 코드의 위쪽 / 아래쪽 화살표를 만들 수 있습니다. 유일한 과제는 화살표의 위치를 ​​정확하게 지정하는 것이지만 작동 할 수 있습니다.

input[type="number"] {
    height: 100px;
}

.number-wrapper {
    position: relative;
}

.number-wrapper:hover:after {
    content: "\25B2";
    position: absolute;
    color: blue;
    left: 100%;
    margin-left: -17px;
    margin-top: 12%;
    font-size: 11px;
}

.number-wrapper:hover:before {
    content: "\25BC";
    position: absolute;
    color: blue;
    left: 100%;
    bottom: 0;
    margin-left: -17px;
    margin-bottom: -14%;
    font-size: 11px;
}
<span class='number-wrapper'>
    <input type="number" />
</span>

위의 크롬 코드가 잘 작동합니다. 나는 mozila에서 이와 같이 시도했지만 작동하지 않습니다. 나는 그것에 대한 해결책을 찾았다

모질라

input[type=number] { 
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0; 
}

감사합니다 Sanjib

스피너 화살표를 수정하는 CSS는 둔하고 신뢰할 수없는 크로스 브라우저입니다.

내가 찾은 가장 안정적인 옵션은 포인터 이벤트로 이미지를 절대적으로 배치하는 것입니다. none; 스피너 위에.

Edge에서 테스트되지 않았지만 다른 모든 브라우저에서 작동합니다.

나는 모바일과 태블릿에서 이것으로 어려움을 겪고 있습니다. 내 솔루션은 absolute스피너에 위치 지정 을 사용하는 것이 었 으므로 다른 사람에게 도움이 될 수 있도록 게시하고 있습니다.

<html><head>
    <style>
      body {padding: 10px;margin: 10px}
      input[type=number] {
        /*for absolutely positioning spinners*/
        position: relative; 
        padding: 5px;
        padding-right: 25px;
      }

      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
        opacity: 1;
      }

      input[type=number]::-webkit-outer-spin-button, 
      input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: inner-spin-button !important;
        width: 25px;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
      }
    </style>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/>
  </head>
  <body >
    <input type="number" value="1" step="1" />

  </body></html>

참조 URL : https://stackoverflow.com/questions/26024771/styling-a-input-type-number

반응형

'programing' 카테고리의 다른 글

Github 페이지의 Jekyll : Markdown에 각주를 추가하는 방법은 없나요?  (0) 2020.12.25
Elasticsearch에 데이터를 삽입하는 방법  (0) 2020.12.25
어패류에서 변수 설정을 해제하려면 어떻게합니까?  (0) 2020.12.25
일괄 처리를 위해 Spark / Flink에 비해 Apache Beam의 이점은 무엇인가요?  (0) 2020.12.25
상속과 함께 Swift 4에서 Decodable 사용  (0) 2020.12.25

'programing'의 다른글

  • 현재글입력 유형 = 숫자 스타일링

관련글

댓글

티스토리툴바