Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Spinner in html 5 input type

deepakt84913413
Level 4
Level 4

Whenever i enable HTML 5  input type for numeric component, the numeric pinner like below is also popping up. Can I hide this using the theme editor? or is there any other way to hide this?

1426495_pastedImage_0.png

1 Accepted Solution
James_R_Green
Correct answer by
Level 7
Level 7

Hi deepakt84913413

You don't appear to be able to change this in the theme editor as you need to do the following in CSS:

.numericInput input[type=number]::-webkit-inner-spin-button,

.numericInput input[type=number]::-webkit-outer-spin-button {

  -webkit-appearance: none;

  margin: 0;

}

Theme editor caters for the "::before" and "::after" pseudo selectors.

The ::-webkit-inner-spin-button pseudo selector, can't be input into the theme editor as far as I am aware.

Instead you can add the CSS above to a client library and reference that on your form (in addition to your theme). I tested it and this does remove the up and down arrows:

before

Screen Shot 2018-02-24 at 16.38.12.png

after

Screen Shot 2018-02-24 at 16.37.55.png

Thanks,

James

View solution in original post

1 Reply
James_R_Green
Correct answer by
Level 7
Level 7

Hi deepakt84913413

You don't appear to be able to change this in the theme editor as you need to do the following in CSS:

.numericInput input[type=number]::-webkit-inner-spin-button,

.numericInput input[type=number]::-webkit-outer-spin-button {

  -webkit-appearance: none;

  margin: 0;

}

Theme editor caters for the "::before" and "::after" pseudo selectors.

The ::-webkit-inner-spin-button pseudo selector, can't be input into the theme editor as far as I am aware.

Instead you can add the CSS above to a client library and reference that on your form (in addition to your theme). I tested it and this does remove the up and down arrows:

before

Screen Shot 2018-02-24 at 16.38.12.png

after

Screen Shot 2018-02-24 at 16.37.55.png

Thanks,

James

View solution in original post