CSE bug? Unable to set width for a number input

I'm trying to convert a sheet to CSE, and have removed "sheet-" from everything that is not a rolltemplate. A fair amount of the styling was converted, but there are so many spacing issues that I'm re-configuring to look right with the new styling. One in particular has been especially frustrating, and it took me hours to realize that the CSE is not recognizing width for a number input: .right-ability-container input[type=number] { text-align: center; font-size: 35px; width: 50px; border: none; background: none; } Everything works except for width. When I realized that, I tried switching the input to text and the css to [type=text], and it works great. Unfortunately, I need to do math on the value. Is this a known bug? Is there a work around I'm not seeing? Sorry if it turns out to be something obvious, but I've been staring at it for hours and need an outside perspective. Thanks.

This is a css specificity issue. The default roll20 styling uses between 2 and 3 classes to declare it's styles. You need to use that many to override. I typically recommend using 3 classes as the base for sheet styles and to consider that your zero level.

I'm not sure I'm following. Do you mean declare 3 different classes, define them each as width:50px  in the CSS,  and list all 3 of those classes in the HTML? I just tried that, and it still ignores all 3. I tried 6, and it ignores all 6.

You might need to use the browser inspect tool and see what classes are affecting number inputs from the Roll20 side, so that you know what to reference to overwrite them.  I checked my sheets to see if I had altered number input width, but the only changes I made was to hide the up/down arrows.

MAMS Gaming said: I'm not sure I'm following. Do you mean declare 3 different classes, define them each as width:50px  in the CSS,  and list all 3 of those classes in the HTML? I just tried that, and it still ignores all 3. I tried 6, and it ignores all 6. No, I mean you need to use multiple classes in your css rule. I usually use the classes of the parents and grandparents of the charsheet E.g. .ui-dialog .charsheet .right-ability-container input[type=number] {   text-align: center;   font-size: 35px;   width: 50px;   border: none;   background: none; } EDIT: Fixed typo of missing space between .charsheet  and .right-ability-container

Huzzah! 2 classes deep, and it works. I'll set 3 just to be sure. Thanks for your help!