Get rid of Ugly spinners in Webkit browsers

If you make a input type as Number then webkit browsers such as Chrome, Safari will make an ugly spinner button. It is useful at times but visual point of view it’s very ugly. Use following CSS to override webkit browser’s CSS.

input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
		    /* display: none; <- Crashes Chrome on hover */
		    -webkit-appearance: none;
		    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
		}
Did you enjoy this article?
Signup today and receive free updates straight in your inbox. We will never share or sell your email address.

5 Comments

  1. Create a text input as blow and check it out in Chrome browser :)

    
    
    Reply
  2. //Create a text input // What does this mean or where do you put this code? in HTML ? Can you point to a site using this where we can see the “ugly spinner button” or a screen shot showing “ugly spinner button” ? My question was to find what it is and not how it is generated!

    Reply
  3. Check this out

    Reply

Leave a Reply