发表新帖
发表新帖

Styling a input type=number

前端 未结
关注
8 1660
野趣味
野趣味 2020-12-12 23:17

Is it possible to apply a style in the inner \"up arrow\" and \"down arrow\" of a in CSS? I would like to change the background of

相关标签:
8条回答
  • 我在风中等你
    2020-12-12 23:51

    UPDATE 17/03/2017

    Original solution won't work anymore. The spinners are part of shadow dom. For now just to hide in chrome use:

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

    or to always show:

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

    You can try the following but keep in mind that works only for 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" />

    0 讨论(0)
  • 长情又很酷
    2020-12-12 23:53

    the above code for chrome is working fine. i have tried like this in mozila but its not working. i found the solution for that

    For mozila

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

    Thanks Sanjib

    0 讨论(0)
  • 小鲜肉
    2020-12-12 23:54

    A little different to the other answers, using a similar concept but divs instead of pseudoclasses:

    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>

    0 讨论(0)
  • 情歌与酒
    2020-12-13 00:03

    I've been struggling with this on mobile and tablet. My solution was to use absolute positioning on the spinners, so I'm just posting it in case it helps anyone else:

    <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>

    0 讨论(0)
  • 南笙
    2020-12-13 00:04

    For mozila

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

    For Chrome

    input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
}
    0 讨论(0)
  • 粉色の甜心
    2020-12-13 00:04

    I modified @LcSalazar's answer a bit... it's still not perfect because the background of the default buttons can still be seen in both Firefox, Chrome & Opera (not tested in Safari); but clicking on the arrows still works

    Notes:

    • Adding pointer-events: none; allows you to click through the overlapping button, but then you can not style the button while hovered.
    • The arrows are visible in Edge, but don't work because Edge doesn't use arrows. It only adds an "x" to clear the input.

    .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>

    0 讨论(0)
 看不清?
提交回复
热议问题