Number Inputs by default have up/down arrows (called spinners) and Selects (dropdowns) have dropdown arrows. These can be unsightly, but you can remove them with CSS.
On Roll20, they normally look something like this: 
You can easily remove those so they look more like this: 
You can (and probably should) change a lot more abought the laytout, like reducing the width of the select and centering the number or text). But we are just looking at the arrows here.
To remove the spinners from an input, create a CSS block that looks like this:
input[type=number] {
-moz-appearance:textfield;
}Code language: CSS (css)That’s all it takes. If you want to limit it to specific inputs, use a class:
input[type=number].noarrows {
-moz-appearance:textfield;
}Code language: CSS (css)You might want to make the number centered in the box.
input[type=number].noarrows {
-moz-appearance:textfield;
text-align: center;
}Code language: CSS (css)There’s a lot more styling you can do, but that gets the basic look.
The dropdown arrow is a little more complicated.
select[type=number] {
-webkit-appearance: none;
-moz-appearance: none;
text-overflow: '';
}Code language: CSS (css)You need more commands because different browsers use different properties. Those starting with -moz were introduced by the Mozilla Foundation (responsible for firefox), and those starting with -webkit were created by Google and are supported by all chromium-based browsers 9which is almost eveyrthing that isn’t Firefox).
Usually, one property is developed by one company then adopted by the others (as happened with the input textfield), but every now and then you have competing standards and have to support them both.
Luckily a property not recognised by one broswer is simply ignored, so you can include them safely.
As with inputs, you might want to create a class for your select dropdowns, and add other styling (like changing the width of the select). But at a bare minimum it will be:
select[type=number].noarrows {
-webkit-appearance: none;
-moz-appearance: none;
text-overflow: '';
}Code language: CSS (css)You can of course include both in the same CSS file, and it’s a good idea to add some extra classes to make sure Roll20 doesn’t override the styles (see Specificity). At a bare minimum, that will be:
.ui-dialog .charsheet input[type=number].noarrows {
-moz-appearance:textfield;
}
.ui-dialog .charsheet select[type=number].noarrows {
-webkit-appearance: none;
-moz-appearance: none;
text-overflow: '';
}Code language: CSS (css)And there you have it – all you need to remove those pesky arrows.
