Spinner in html 5 input type

Avatar

Avatar
Validate 10
Level 3
deepakt84913413
Level 3

Likes

6 likes

Total Posts

71 posts

Correct reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 3
deepakt84913413
Level 3

Likes

6 likes

Total Posts

71 posts

Correct reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile
deepakt84913413
Level 3

23-02-2018

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 50
Level 5
James_R_Green
Level 5

Likes

52 likes

Total Posts

191 posts

Correct reply

47 solutions
Top badges earned
Boost 50
Validate 25
Validate 10
Validate 1
Boost 5
View profile

Avatar
Boost 50
Level 5
James_R_Green
Level 5

Likes

52 likes

Total Posts

191 posts

Correct reply

47 solutions
Top badges earned
Boost 50
Validate 25
Validate 10
Validate 1
Boost 5
View profile
James_R_Green
Level 5

24-02-2018

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

Answers (0)