Override number input field width

This is very possibly a dumb question --
I am attempting to create a circular input field. To do so I simply set the element's width and height to the same value and then set the border radius to enough to round it in a circular fashion. It looks great in Brackets or JSfiddle...

but as soon as I put it into roll20, the circles become ovals with a wide width.

Using chrome's developer tools, I found out this was because the width of number input fields were being set to 3.5em, presumably by roll20.

I looked around the forums and searched google, but was unable to find anyone who had this problem. I find it hard to believe nobody's tried setting a number field's width... is this just an accepted part of sheet-making or am I missing something obvious?
Are there any workarounds for this or tricks I should know that would allow styling the width of an input field (while still having the input field behave like a number for character-sheet purposes), or do I have to abandon my circles?

This is an issue of specificity. The selector you've written is ".charsheet .sheet-attribute-score" (.charsheet is added for you if you didn't include it), while the selector in the application is ".ui-dialog .charsheet input[type=number]", which is more specific and thus gains priority.

The specificity of a selector is based on the number of selector types in it. The selector types are (in order of increasing specificity):

1. The universal selector: *
2. Type selectors: the name of a tag, such as "input"
3. Class selectors such as ".sheet-attribute-score"
4. Attribute selectors such as "[type=number]"
5. Pseudo-classes such as ":hover" (with the exception of :not(), but any selector types inside the :not() do count towards specificity)
6. Id selectors such as #example (do not use ids or id selectors on your character sheets!)
7. Inline styles

So the built-in selector has 2 classes, a type, and an attribute selector. Your selector has 2 classes.

You have two options for fixing this problem: either increase the specificity to be equal or greater than the built-in one (when two selectors of the same specificity conflict, the one defined later in the CSS wins, and character sheet CSS is defined after the default stuff), or, use !important.

When a CSS property is followed by "!important", it overrides specificity (unless the same property is important in another selector!). !important is generally considered bad practice, but one of the cases where it's deemed acceptable is in overriding external CSS (such as, for example, the defaults in Roll20). You could rewrite your selector like this:

.sheet-attribute-score {
    /* ... unchanged stuff ... */
    height: 2em !important;
    width: 2em !important;
}

Also, I recommend removing the spinner from the number input that's added by webkit browsers. When you have an extremely narrow number input, it gets in the way:

input.sheet-attribute-score[type=number]::-webkit-outer-spin-button,
input.sheet-attribute-score[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

I do this to make the numbers with circles around it: 

<div class="sheet-circle"><input type="number" class="sheet-attribute" name="attr_feat-Agi" value="0"/></div>

And then have this as the style:

div.sheet-circle {
    position: relative;
    width:40px;
    height:40px;
    border:2px solid gray;
    border-radius:50%;
    background:white;
}

Making the circle exist only with the number input never seems to work, but if you make a <div> with number box inside of it, it should work.

But listen to Brian first; he knows what he is talking about.  

All kinds of helpful! Thank you very much. And I learned something to boot!

Coal Powered Puppet said:

Making the circle exist only with the number input never seems to work, but if you make a <div> with number box inside of it, it should work.

But listen to Brian first; he knows what he is talking about.  

Also, I created circular number inputs for the DFRPG sheet:


Those three smaller circles are 2 disabled number inputs and one enabled one. (Compare to the paper version of the sheet.)



The circles in the Skills column are also number inputs.