-1

I am new to css/html and want to know the css style for the input control of type number. I am getting the default style(two arrows one in one column) with the following code.

<input type="number" placeholder="0">

Default Style:

enter image description here

But i want the css style for the image given below(Highlighted with red circle).

Spinner input control

I know with the similar question asked previously Customize appearance of up/down arrows in HTML number inputs here it gives the following spin control which i don't want. enter image description here

My requirement is very specific to the 2nd image which i have attached.

Jnana
  • 824
  • 13
  • 12
  • 1
    Stack Overflow is for asking specific programming questions. In order for us to help you, please provide a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve). Show us the code you've written to attempt to solve your problem and describe how the behavior of your code differs from the expected behavior. Following these steps increases the likelihood of someone answering your question. – Lews Therin Jun 16 '17 at 13:55
  • 1
    Possible duplicate of [Customize appearance of up/down arrows in HTML number inputs](https://stackoverflow.com/questions/24537234/customize-appearance-of-up-down-arrows-in-html-number-inputs) – Deathstorm Jun 16 '17 at 13:58
  • No it is not duplicate. Please see my modified question. – Jnana Jun 17 '17 at 05:10

1 Answers1

1

Yes, you can (webkit only I assume):

<style>
input[type=number] {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    padding: 0 8px;
}
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]:hover::-webkit-inner-spin-button { 
    background: #eee url('https://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%;  
    width: 14px;
    height: 14px;
    padding: 4px;
    position: relative;
    right: 4px;
    border-radius: 28px;
}
</style>

<input type="number" value="0">

See JSFiddle method 1

See JSFiddle method 2

Reference

bg image

Deathstorm
  • 818
  • 11
  • 36
  • Thanks for the reply. But this gives different style. The style i want is similar to the attached 2nd image of mine. – Jnana Jun 17 '17 at 05:09