1

I have a psd like this. And I would like to turn it into something like this:

enter image description here

How to customize increment arrows on input of type number using CSS?

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

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

.number-input {
    border: 2px solid #ddd;
    display: inline-flex;
}

.number-input,
.number-input * {
    box-sizing: border-box;
}

.number-input button {
    outline:none;
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.number-input button:before,
.number-input button:after {
    display: inline-block;
    position: absolute;
    content: '';
    width: 0.5rem;
    height: 1px;
    background-color: #212121;
    transform: translate(-50%, -50%);
}
.number-input button.plus:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
    font-family: sans-serif;
    max-width: 5rem;
    padding: .5rem;
    border: solid #ddd;
    border-width: 0 2px;
    text-align: center;
}
<td>
  <div class="form-row justify-content-center">
    <div class="form-group mb-0">
      <div class="input-group mx-auto mb-0">
        <div class="number-input">
          <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>
          <input class="quantity bg-light" min="0" placeholder="0" name="quantity" value="1" type="number">
          <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
        </div>
      </div>
    </div>
  </div>
</td>

But I see this demo

demo

It show very bad.

The second view is emulated using two separate buttons.

How could I style the arrows as described?

Improve this question
5
  • I want this . Please do not be mistaken. i.sstatic.net/kUKzi.png Commented Aug 23, 2020 at 6:40
  • Do you want to customize the + and - icons? Commented Aug 23, 2020 at 6:51
  • Yes, I want to customize like this i.sstatic.net/kUKzi.png and I am using rtl Commented Aug 23, 2020 at 6:53
  • I still can't understand. You wanna customize the icons or just alter their position? Commented Aug 23, 2020 at 7:14
  • I want to shrink. This demo is too big. Commented Aug 23, 2020 at 7:20

1 Answer 1

Reset to default
2 

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

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

.number-input {
    border: 2px solid #ddd;
    display: inline-flex;
}

.number-input,
.number-input * {
    box-sizing: border-box;
}

.number-input button {
    outline:none;
    -webkit-appearance: none;
    background-color: #eeeeee;
    border: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    cursor: pointer;
    margin: 0;
    position: relative;
    padding:0;
}

.number-input button:before,
.number-input button:after {
    display: inline-block;
    position: absolute;
    content: '';
    width: 0.5rem;
    height: 2px;
    background-color: #212121;
    transform: translate(-50%, -50%);
}
.number-input button.plus:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
    font-family: sans-serif;
    max-width: 4.5rem;
    padding: .5rem;
    border:0;
    text-align: center;
    outline:none;
}
.number-input{
    border: solid #c2c4c6;
    border-width:2px;
}
<td>
  <div class="form-row justify-content-center">
    <div class="form-group mb-0">
      <div class="input-group mx-auto mb-0">
        <div class="number-input">
          <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>
          <input class="quantity bg-light" min="0" placeholder="0" name="quantity" value="1" type="number">
          <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
        </div>
      </div>
    </div>
  </div>
</td>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.