input type number hide arrows from right part of input

Question

I have 2 inputs with type number:

<input type="number">

http://jsfiddle.net/dkadr55g/1/

I want to hide arrows from the right for first input, I found solution using this code:

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

but if using this, all inputs doesn't create arrows

http://jsfiddle.net/dkadr55g/2/

how to set for first withoud arrows and for second with arrows?

Answer 1

Just add some class to distinguish inputs:

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

First number: <input type="number" class="no-spinner"><br>
Second number: <input type="number"><br>

Answer 2

you can simply add a class to your input

Second number: <input class="without_number" type="number"><br>

Than you select only fields with this class:

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