样式输入类型编号

Question

我正在尝试对输入类型编号进行风格化。这样：https://ant.design/components/input-number/（第一个输入）。但是没有使用ant设计框架。在有内旋、外旋的地方，我正在尝试添加白色背景、灰线并更改内旋颜色、外旋。我可以改变背景颜色，但我不能再旋转了。我看不到他们。 我可以使用bootstrap-react框架，但是我没有看到这样的数字输入

此处代码：https://stackblitz.com/edit/react-cojnud

input[type=number] {
  line-height: 27px;
  box-sizing: border-box;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  -webkit-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
  position: relative;
  width: 100%;
  height: 32px;
  padding: 4px 11px;
  color: rgba(0,0,0,0.65);
  font-size: 14px;
  line-height: 32px;
  background-image: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  display: inline-block;
  width: 90px;
  margin: 0;
  padding: 0;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

input[type=number].mod::-webkit-inner-spin-button {
  width: 30px;
  height: 30px;

  position: relative;
  display: block;
  overflow: hidden;
  color: rgba(0,0,0,0.45);
  font-weight: bold;
  line-height: 0;
  text-align: center;
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
  background-color: #fff;
}

input[type=number]::-webkit-inner-spin-button:hover {
  color: blue;
}

input[type=number]:hover {
  border-color: #40a9ff;
  border-right-width: 1px !important;
}


input[type="number"].mod::-webkit-inner-spin-button {
  -webkit-appearance: none;
  background-color: white;
  color: black;
}

Answer 1

试试这个

    jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">&#11161;</div><div class="quantity-button quantity-down">&#11163;</div></div>').insertAfter('.quantity input');
    jQuery('.quantity').each(function() {
      var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.quantity-up'),
        btnDown = spinner.find('.quantity-down'),
        min = input.attr('min'),
        max = input.attr('max');

      btnUp.click(function() {
        var oldValue = parseFloat(input.val());
        if (oldValue >= max) {
          var newVal = oldValue;
        } else {
          var newVal = oldValue + 1;
        }
        spinner.find("input").val(newVal);
        spinner.find("input").trigger("change");
      });

      btnDown.click(function() {
        var oldValue = parseFloat(input.val());
        if (oldValue <= min) {
          var newVal = oldValue;
        } else {
          var newVal = oldValue - 1;
        }
        spinner.find("input").val(newVal);
        spinner.find("input").trigger("change");
      });

    });

.quantity {
  position: relative;
}


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

input[type=number]
{
  -moz-appearance: textfield;
  border-radius: 5%;
}

.quantity input {
  width: 45px;
  height: 35px;
  line-height: 1.65;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  padding-left: 20px;
  border: 1px solid #eee;
}

.quantity input:focus {
  outline: 0;
}

.quantity-nav {
  float: left;
  position: relative;
  height: 40px;
}


.quantity-button {
  position: relative;
  cursor: pointer;
  border-left: 1px solid #eee;
  width: 20px;
  text-align: center;
  color: #333;
  font-size: 13px;
  font-family: "Trebuchet MS", Helvetica, sans-serif !important;
  line-height: 1.7;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.quantity-button.quantity-up {
  position: absolute;
  height: 46%;
  top: 0;
  margin-top: 0px;
  border-bottom: 1px solid #eee;
}

.quantity-button.quantity-down {
  position: absolute;
  bottom: 4px;
  height: 46%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity">
  <input type="number" min="1" step="1" value="1">
</div>

见代码Link

Answer 2

你好，

尝试删除-webkit-appearance: none; 你会再次看到旋转器！

Answer 3

您将无法跨浏览器对其进行修改。最好按照以下方式使用：

      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 */
  }
  .number-wrapper {
    position: relative;
    width: 300px;
    height: 30px;
  }

  .number-wrapper input {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    padding-right: 18px;
    text-align: right;
  }

  .number-wrapper .rocker {
    position: absolute;
    background: #FFF;
    border: 1px solid lightblue;
    right: 0;
    padding: 2px 4px;
    color: #ccc;
    transition: all ease-in 100ms;
    height: 50%;
    box-sizing: border-box;
    line-height: 12px;
    cursor: pointer;
    visibility: hidden;
  }

  .number-wrapper:hover .rocker {
    visibility: visible;
    transition: all ease-in 300ms;
  }

  .number-wrapper .rocker.up {
    top: 0;
  }

  .number-wrapper .rocker.down {
    bottom: 0;
    transform: rotate(180deg);
    border-bottom: none;
  }

  .number-wrapper .rocker:hover,
  .number-wrapper .rocker:focus {
    box-shadow: 0 0 4px lightblue;
  }

  .number-wrapper .rocker:active {
    transform: scale(0.4);
  }

  .number-wrapper .rocker.down:active {
    transform: rotate(180deg) scale(0.4);
  }

 <div class="number-wrapper"><span class="rocker up">^</span><span class="rocker down">^</span><input class="mod" type="text" /></div>