Text box number - how to display up/down arrows

Anvil Q&A
15

Yes! (tested on Firefox, Chrome, and Safari)

Look under “Assets”. There you can choose to edit “theme.css”.

sc1
sc11006×325 29.8 KB

If you scroll down near the end you will see:

/* Component: TextBox + TextArea */
.
.
.

If you add the following CSS underneath, it should do the trick.

/* Hack to remove little arrows (spinners) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

Clone to try:

Disclaimer:
I don’t know much about CSS and I’ve only tested this on Chrome, Firefox, and Safari. This potential solution is something I dug up from Google. Apparently the little arrows are called spinners from what I could gather.

1 Like