Cross-browser-styling van het invoertype-nummer zodat ze niet langer zijn dan nodig

Ik heb verschillende nummeringangen van verschillende lengtes die ik zodanig wil stylen dat de invoervakken niet langer zijn dan nodig:

<input type=number name=short value='1' min=0 max=9 size=1 maxlength=1>
<input type=number name=medium value='123' min=0 max=999 size=3 maxlength=3>
<input type=number name=long value='12345' min=0 max=99999 size=5 maxlength=5>

Firefox herkent nummer invoer niet en verwerkt de invoer ervan uitgaande dat het tekst is. Daarom worden de grootte en maxlength toegepast op de invoervakken.

Chrome herkent het type nummer en beperkt automatisch de grootte van het invoervak ​​op basis van de max waarde plus de breedte van de draai- (omhoog/omlaag) knoppen.

Opera echter, dat ook de invoer van het nummer herkent, doet de dingen anders. Het gebruikt de waarde size om de grootte van het invoervak ​​of de standaardinstelling van de browser te berekenen als er geen is opgegeven. Er wordt geen rekening gehouden met de breedte van de draaiknoppen, waardoor een deel van de invoer wordt verduisterd.

Is er een manier om de nummeringangen op de juiste manier vorm te geven, zodat ze niet langer zijn dan nodig en rekening houdend met het probleem dat ik in de browser van Opera heb genoemd?

2

2 antwoord

Waarschijnlijk kun je het beste zonder vervelende hacks doen door je invoer met 1 te vergroten:

<input type=number name=short value='1' min=0 max=9 size=2 maxlength=1>
<input type=number name=medium value='123' min=0 max=999 size=4 maxlength=3>
<input type=number name=long value='12345' min=0 max=99999 size=6 maxlength=5>

Het zal geen groot verschil maken in FF en Webkit, maar zal correct worden weergegeven in Opera

UPDATE Alternatively you can use the CSS hack to target opera only - http://jsfiddle.net/KmHwG/4/

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    input[name=short]  { width: 24px }
    input[name=medium] { width: 38px } 
    input[name=long]   { width: 52px } 
}
3
toegevoegd
De draaiknoppen zijn twee cijfers breed voor mijn geval. Dit is een verrassend goede en eenvoudige oplossing. Laat me nog een paar minuten wachten om te zien of er anderen zijn. Bedankt!
toegevoegd de auteur Question Overflow, de bron
Die namen: kort, gemiddeld en lang zijn slechts voorbeelden. Ik heb veel nummerinvoer, dus dat alternatief is niet haalbaar. Het is trouwens -o - , niet -webkit - voor opera.
toegevoegd de auteur Question Overflow, de bron
Wauw, dat is een geweldige link. Bedankt! Misschien kan ik dat gewoon gebruiken om de draaiknoppen te verbergen. Mogelijk?
toegevoegd de auteur Question Overflow, de bron
Ik weet van de -o - , maar verrassend genoeg is dit de hack voor Opera - stackoverflow.com/a/ 1280454/981134 Ik heb de -o - geprobeerd, maar het werkte niet voor een vreemde reden
toegevoegd de auteur Zoltan Toth, de bron

Ik denk dat dit een alternatieve oplossing zou kunnen zijn:

noindex:-o-prefocus, input[type=number] {
 padding-right: 1.5em;
}
0
toegevoegd