HOW TO HIDE SPIN BUTTONS IN HTML INPUT FIELD

HIDE SPIN BUTTONS IN HTML INPUT FIELD

when we use the input field like below to input only numbers

<input type = "number">

 then spin buttons makes the user experience low so now the question is how to remove them 

please watch this video to know how to hide spin buttons in html input field

in this video I shown how to hide spin buttons otherwise  see the code below

<style>

    input::-webkit-outer-spin-button ,

    input::-webkit-inner-spin-button{

            display:none;

}

</style>

NOTE : this code only works when you set display property to none for both buttons

there are many other webkit extensions in  css they are::

-webkit-animation-trigger

-webkit-app-region

-webkit-appearance

-webkit-aspect-ratio

-webkit-backdrop-filter

-webkit-background-composite

-webkit-border-after

-webkit-border-after-color

-webkit-border-after-style

-webkit-border-after-width

-webkit-border-before

-webkit-border-before-color

-webkit-border-before-style

-webkit-border-before-width

-webkit-border-end

-webkit-border-end-color

-webkit-border-end-style

-webkit-border-end-width

-webkit-border-fit

-webkit-border-horizontal-spacing

-webkit-border-start-color

-webkit-border-start-style

-webkit-border-start-width

-webkit-border-start

-webkit-border-vertical-spacing

-webkit-box-align

-webkit-box-direction

-webkit-box-flex-group

-webkit-box-flex

-webkit-box-lines

-webkit-box-ordinal-group

-webkit-box-orient

-webkit-box-pack

-webkit-box-reflect

-webkit-column-axis

-webkit-column-break-after

-webkit-column-break-before

-webkit-column-break-inside

-webkit-column-progression

-webkit-cursor-visibility

-webkit-dashboard-region

-webkit-font-size-delta

-webkit-font-smoothing

-webkit-highlight

-webkit-hyphenate-character

-webkit-hyphenate-limit-after

-webkit-hyphanate-limit-before

-webkit-hyphanate-limit-lines

-webkit-initial-letter

-webkit-line-align

-webkit-line-box-contain

-webkit-line-clamp

-webkit-line-grid

-webkit-line-snap

-webkit-locale

-webkit-logical-height

-webkit-logical-width

-webkit-margin-collapse

-webkit-margin-before-collapse

-webkit-margin-after-collapse

-webkit-margin-bottom-collapse

-webkit-margin-top-collapse

-webkit-margin-after

-webkit-margin-berfore

-webkit-margin-end

-webkit-margin-start

-webkit-marquee-direction

-webkit-marquee-increment

-webkit-marquee-repetition

-webkit-marquee-speed

-webkit-marquee-style

-webkit-marquee

-webkit-mask-box-image-outset

-webkit-mask-box-image-repeat

-webkit-mask-box-image-slice

-webkit-mask-box-image-source

-webkit-mask-box-image-width

-webkit-mask-box-image

-webkit-mask-repeat-x

-webkit-mask-repeat-y

-webkit-mask-source-type

-webkit-max-logical-height

-webkit-max-logical-width

-webkit-min-logical-height

-webkit-min-logical-width

-webkit-nbsp-mode

-webkit-padding-after

-webkit-padding-before

-webkit-padding-end

-webkit-padding-start

-webkit-perspective-origin-x

-webkit-perspective-origin-y

-webkit-print-color-adjust

-webkit-rtl-ordering

-webkit-svg-shadow

-webkit-tap-highlight-color

-webkit-text-combine

-webkit-text-decoration-skip

-webkit-text-decorations-in-effect

-webkit-text-fill-color

-webkit-text-security

-webkit-text-stroke-color

-webkit-text-stroke-width

-webkit-text-stroke

-webkit-text-zoom

-webkit-transform-origin-x

-webkit-transform-origin-y

-webkit-transform-origin-z

-webkit-user-drag

-webkit-user-modify

-webkit-text-underline-position

-webkit-transform

-webkit-transform-origin

-webkit-transition

-webkit-transition-delay

-webkit-transition-duration

-webkit-transition-property

-webkit-text-orientation

-webkit-text-size-adjust

-webkit-text-justify

-webkit-text-emphasis

-webkit-transition-timing-function

-webkit-user-select

and many more .......

thanks for visiting ......

please subscribe my youtube channel @kssvinay