CSS : Want an input type number CSS just like google

Question

I am trying to make the css of input type number just like in the Google Chrome. but it is not working in my mozila browser.

I don't know how to make it just like it is seen in Google chrome.

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]::-webkit-inner-spin-button:before,
  input[type=number]::-webkit-inner-spin-button:after {
    content: "^";
    position:absolute;
    right: 0;
    font-family:monospace;
    line-height:1px;
  }

  input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
  }

  input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
  }

<input type="number" value="10" max="15">

that is an html5 input type that is not supported by all versions of browsers — happymacarts
– happymacarts, Commented Feb 6, 2017 at 15:58
That looks like an ASP textbox control using TextMode="Number" rendered in Chrome. — jmag
– jmag, Commented Feb 6, 2017 at 15:59
yes.. but i want to make it same for all browsers and want to give css as seen in google chrome. — user7030651
– user7030651, Commented Feb 6, 2017 at 16:00

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

That's because you can't use pseudo classes on the ::webkit-inner-spin-button.

See this for a working example

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. source

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 6, 2017 at 15:59

Kevin Jantzer

9,5112 gold badges31 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user7030651 Over a year ago

yes.. but i want to make it same for all browsers and want to give css as seen in google chrome.

Kevin Jantzer Over a year ago

Right, the example linked above does that – but ::webkit prefixes by definition won't work in every browser

user7030651 Over a year ago

can't I use for mozilla by putting prefix as -moz

Kevin Jantzer Over a year ago

No, read the documentation

Collectives™ on Stack Overflow

CSS : Want an input type number CSS just like google

1 Answer 1

See this for a working example

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

See this for a working example

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related