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, Feb 06 '17 at 15:58
That looks like an ASP textbox control using TextMode="Number" rendered in Chrome. — jmag, Feb 06 '17 at 15:59
yes.. but i want to make it same for all browsers and want to give css as seen in google chrome. — , Feb 06 '17 at 16:00

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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 '20 at 09:12

Community

1
1

answered Feb 06 '17 at 15:59

Kevin Jantzer

9,215
2
28
52

yes.. but i want to make it same for all browsers and want to give css as seen in google chrome. – Feb 06 '17 at 16:00
Right, the example linked above does that – but `::webkit` prefixes by definition won't work in every browser – Kevin Jantzer Feb 06 '17 at 16:03
can't I use for mozilla by putting prefix as `-moz` – Feb 06 '17 at 16:06
No, [read the documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button) – Kevin Jantzer Feb 06 '17 at 16:07

CSS : Want an input type number CSS just like google

1 Answers1

See this for a working example