Custom sheets : make inputs behave like the bubbles

Hello all, I have had an interesting request for our sheet. One of our users has asked if there would be a way for some the inputs (the ones that we automatically link to the token bubbles) to behave a bit more like the bubbles. With a default input, if the current value is 1, and you click on it and type 2, it will insert the 2 before or after the 1, resulting in 21 or 12 depending on where you clicked. With the token bubbles, if you click, the current value disappears, and if you type 2, it will keep 2... And If you type "+2" it will add 2 to the current value... Is there any CSS way to change the input type="number" for this kind of behaviour. I use the opportunity to ask another tricky CSS wizardry: is there any way to force a number input to a certain data format (specifically, I'd like positive values to display as "+1" and not just "1" Thanks for your help... Have googling; but didn't find the right keyword

For your first question, that would require JS to handle. The handling for the +/-X is a decent idea, but I would strongly recommend not doing the other side of it as there's no way to differentiate between the user intending to change that 1 to a 12 and them meaning to replace the whole thing with 2. To fully replace the value, the user can just double click in the input which will select the full number there. For your bonus CSS question there are a couple options. None of them are what I'd call ideal You can handle it with JS (replace 1 with +1), but that can cause issues for using the value and requires changing the input type to text. You can put a span with '+' in it before the input and conditionally display the span based on the value of the attribute. Something like: HTML <div class='plus-container'> <input type='hidden' class='plus-container__control' name='attr_value' value='0'> <span class='plus-container__plus'>+</span> <input type='number' class='plus-container__input' name='attr_value' value='0'> </div> CSS .plus-container{ display:grid; grid-template-columns:1rem 3rem; } .plus-container__plus{ grid-column:1/2; } .plus-container__control[value*="-"] + .plus-container__plus{ display:none; } .plus-container__input{ grid-column:2/3; }

Thanks as always Scott ! So the second is actually what I was already doing and that I was looking if there was another more elegant way to do... Fact that you point me in this same direction makes me pretty confident there must not be... Thanks a lot !