Suche input type="file" CSS Formatierung für FireFox

Webdesign & Technik HTML & CSS
1

Wie formatiert man das Element für FireFox mit CSS? (bitte keine divs Lösung)
Gibt es überhaupt -moz Formatierungen für den Button innerhalb von input type=„file“?

InputTypeFileInFireFox

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) /** NUR IE 10+ **/
{
input[type='file']::-ms-browse { color:#000000; background-color:#FFFF88; border-top-left-radius:10px 28px; border-bottom-right-radius:20px 28px; }
input[type='file']::-ms-browse:hover              { color:#000000; background-color:#FF8888; }
input[type='file']::-ms-browse:focus              { color:#000000; background-color:#FF8888; }
input[type='file']::-ms-browse:active             { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-browse:focus:hover        { color:#000000; background-color:#FF8888; }
input[type='file']::-ms-browse:hover:active       { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-browse:focus:active       { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-browse:focus:hover:active { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-value { background-color:transparent; border:0px; }
input[type='file']::-ms-value:hover { color:#FF0000; }
}

@supports (-ms-ime-align:auto) /** NUR Edge 12+ **/
{
input[type='file']::-ms-browse { color:#000000; background-color:#FFFF88; border-top-left-radius:10px 28px; border-bottom-right-radius:20px 28px; }
input[type='file']::-ms-browse:hover              { color:#000000; background-color:#FF8888; }
input[type='file']::-ms-browse:focus              { color:#000000; background-color:#FF8888; }
input[type='file']::-ms-browse:active             { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-browse:focus:hover        { color:#000000; background-color:#FF8888; }
input[type='file']::-ms-browse:hover:active       { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-browse:focus:active       { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-browse:focus:hover:active { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-value { background-color:transparent; border:0px; }
input[type='file']::-ms-value:hover { color:#FF0000; }	
}

/* Chromium */
@media all and (-webkit-min-device-pixel-ratio:0) /* NUR Chrome oder Safari */
{
input[type='file']::-webkit-file-upload-button { color:#000000; background-color:#FFFF88; border-top-left-radius:10px 28px; border-bottom-right-radius:20px 28px; }
input[type='file']::-webkit-file-upload-button:hover              { color:#000000; background-color:#FF8888; }
input[type='file']::-webkit-file-upload-button:focus              { color:#000000; background-color:#FF8888; }
input[type='file']::-webkit-file-upload-button:active             { color:#000000; background-color:#FF4444; }
input[type='file']::-webkit-file-upload-button:focus:hover        { color:#000000; background-color:#FF8888; }
input[type='file']::-webkit-file-upload-button:hover:active       { color:#000000; background-color:#FF4444; }
input[type='file']::-webkit-file-upload-button:focus:active       { color:#000000; background-color:#FF4444; }
input[type='file']::-webkit-file-upload-button:focus:hover:active { color:#000000; background-color:#FF4444; }
}

/* FireFox Stil fehlt! */
@-moz-document url-prefix() /* NUR FF */
{ }
2

Ahoi,

Mozilla ist da prinzipientreu - es existiert also kein entsprechendes Attribut.
Ohne ein Workaround wird es recht schwierig. Vlt hilft ja dies hier weiter: https://stackoverflow.com/questions/352467/how-can-i-style-a-file-input-field-in-firefox

3

Vielen herzlichen Dank Chris,

ich habe gehofft es gäbe -moz Properties die ich nicht kenne. Sehr schade. Der Einsatz von for="objektID" ist mir bekannt. Ich müsste die dynamisch aufgebauten Felder mit [+] und [-] umbauen. Das mache ich nicht so gerne. Zudem sieht man nicht welche Dateien gerade hochgeladen werden. Wie auch immer Danke!

Gruß Markus