CODEWITHSUNDEEP
htmlcss
emiliano1991
emiliano1991

Reputation: 103

Style input type number more plus button on the side

there is any way to style input type number like this?

enter image description here

thanks!

Upvotes: 1

Views: 12794

Answers (1)

Rubioli
Rubioli

Reputation: 680

Below you can see the snippet and if you wanna see it in JSFIDDLE, take a look here: http://jsfiddle.net/74xa8Ler/

To explain a bit, how the whole thing works: Here, you'll use css for some styling manipulation.

But in the html code, you see 2 buttons:

<button onclick="this.parentNode.querySelector('input[type=number]')" ></button>

One with .stepDown() and the other one with .stepUp(). As you can see querySelector is being used to connect these buttons to your input.

So the way it works when a button is clicked, it looks at your querySelector and after that, the action which is .stepUp() or .stepDown() and apply it to your input.

Remember if you have several inputs with type="number", you can't simply do .querySelector('input[type=number]')" on all of them. You would need to add id or class to each input or even input[name=yourName] and let the querySelector select your correct input.

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: 0;
  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;
  box-shadow: 0px 0px 1px #474747;
    border-radius: 50%;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 1rem;
  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: 5rem;
  padding: .5rem;
  border: none;
  border-width: 0 2px;
  font-size: 2rem;
  height: 3rem;
  font-weight: bold;
  text-align: center;
  color:#9be3df;
}
<div class="number-input">
  <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>
  <input class="quantity" min="0" name="quantity" value="1" type="number">
  <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
</div>

Upvotes: 9

Related Questions