Firefox <input type="file"> border-color problem

[Snarffy]

Geachte lezer,

ik heb een probleem met FireFox en wel het volgende :

zodra ik doormiddel van onderstaande style

1
2
3
4
5
6
7
8
input 
{
 
border-style:solid;
 
border-color: red blue green yellow;
background:rgba(250,223,70,0.7)!important;
}

mijn input items op de form pagina een format geef wordt de border van het input type "file" ook netjes voorzien van de vier kleuren, deze kleuren zijn sowiezo al iets lichter dan die van de overige niet "file" input velden
Zodra ik de style aanpas naar de werkelijk gewenste kleuren met de code beginnende met het "#" je dan gaat het fout, krijg dan de standaard border te zien bij het type="file". Hier onder de style welke ik zou willen toepassen

1
2
3
4
5
6
7
8
input 
{
 
border-style:solid;
 
border-color: #e2c83a #e2c83a #e0be05 #e0be05;
background:rgba(250,223,70,0.7)!important;
}

Is er iemand die hier een oplossing voor heeft ?

[csshunter]

Hoi Snarffy,
Ik vermoed dat Firefox en andere browsers geduldig zitten te wachten tot je een border-dikte opgeeft.
Een border bestaat immers uit 3 dingen: een border-stijl, een border-kleur en een border-dikte.
Wordt 1 van de 3 niet vermeld, dan geen border!
Dus ik zou eens proberen toe te voegen:

border-width: 30px; /* ook in 4en splitsbaar voor boven/rechts/onder/links */

(zo zie je of er iets gebeurt; een andere waarde kan ook)
Mocht vervolgens Chrome raar gaan doen, zie dan dit topic (daar gaat het om een submit-button).

Met vriendelijke groet,
CSShunter

[Snarffy]

Beste CSSHunter,

bedankt voor je antwoord.

ik had wel al eea uitgeprobeerd voordat ik hier een vraag ging stellen, ik heb het nu zo ingesteld:

1
2
3
4
5
6
7
input 
{
border-style:solid;
border-width:10px;
background:rgba(250,223,70,0.7)!important;
border-color: red blue green yellow;
}

en krijg dan als resultaat :

InputBorder.jpg

Waarbij het veld "subject" een input type=text veld is en "feedback" een textarea en "file" een input type="file", zoals je ziet heeft de border dikte geen effect bij het veld "file" alleen de kleuren worden hier wel doorgevoerd mits ze als woord opgenomen zijn.

Gr Snarffy

[Snarffy]

Nog even ter aanvulling, voorgaande jpg was een capture van een FireFox scherm, ik heb hier een capture van een IExplorer scherm waarbij de style exact hetzelfde is.

InputBorderIE.jpg

Gr Snarffy

[csshunter]

Ai!
Ik had het zelf niet uitgeprobeerd. Maar forms zijn erg lastige dingen om te stylen, en browsers zijn daar niet erg consequent in. Dat zal ermee te maken hebben dat form-controls gedeeltelijk een zaak zijn van het Operating System, en het dus van de samenwerking tussen browser en OS afhangt hoe het uitpakt.

Ik zie dat Peter Paul Koch van quirksmode er rond 2008 een artikel over geschreven heeft en toen min of meer tot de conclusie kwam "schier onoplosbaar":

Styling an input type="file"
Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The "Browse" button, especially, is completely inaccessible to CSS manipulation.
(www.quirksmode.org/dom/inputfile.html)

Dit vraagt dus om verdere experimenten, om te kijken hoe de stand van zaken 4 jaar later is.
Ik ga er eens mee aan de slag (maar eerst wat andere dingen doen).

Er zal wellicht ook wat te vinden zijn op de Google naar styling file input in form, dat heb ik nog niet doorgevlooid: www.google.nl/search?q=styling+file+input+in+form.

Wordt vervolgd,
Met vriendelijke groet,
CSShunter
_______
PS: Het ding in een <div> zetten die je de border-styles geeft, werkt niet?

[Snarffy]

Beste CSSHunter,

bedankt voor je antwoord.

Ik heb zelf ook al flink gezocht op internet, dat die "bladeren" knop blijft zoals tie is vindt ik nog niet zo erg, heb wel wat styles gevonden die daar iets aan kunnen veranderen maar mooi wordt het niet.


Ik heb nu een border d.m.v. "div" om het geheel heen gelegd (jouw ingeving), ziet er op zich niet slecht uit alleen de border van het input type file blijft zichtbaar. Ook ziet het er niet meer uit bij een border-radius van 10px.

Met vriendelijke groet,
Snarffy

[csshunter]

Hoi Snarffy,
Verzuchting tussendoor: brr, dit is gruwzaam!

Wordt vervolgd,
CSShunter

[csshunter]

Nou, met het nodige experimenteren en beGoogle'en ben ik pas bij testversie 8 en ik heb al iets draaiende (de subversies tel ik voor het gemak even niet mee).

Dwz: voor Firefox, Chrome, Opera en Safari werkt 't, met de semitransparantie en de borders in alle gewenste kleuren in #-formaat, ook met de ronde hoekjes. Nog wel wat verder uitwerken, maar ik geloof dat ik 't principe te pakken heb, in een combi van css en javascript.
Om je vast lekker te maken een screenshotje :

Maar ... nu moet het grote werk nog komen: de Internet Explorers...
Dat zouden wel eens de testversies 9 t/m 217 kunnen worden, met de klemmende vraag of het überhaupt kan lukken om voor de verschillende IE's iets vergelijkbaars / toonbaars op het scherm te krijgen.

• Daarnaast zit ik braaf te knutselen op m'n Windows-XP, maar omdat het over OS-controls gaat zouden Vista en Win7 wel eens andere opvattingen kunnen hebben - daar moet het natuurlijk ook op draaien.
• En dan hebben we het nog niet over Mac's en Linuxen, en de tablets, handhelds en andere moderniteiten.

Ik ga in elk geval nog even door met wat ik wellicht voor IE kan verzinnen.

Wordt vervolgd!
Met vriendelijke groet,
CSShunter

[Snarffy]

Hallo CSSHunter,

dat heb je zeker met die "overlay" techniek uitgewerkt ? Ziet er goed uit !

Gr Snarffy

[csshunter]

Hoi Snarffy,
Ja, soort van "overlay" (maskering).

Ter geruststelling: ik ben dit topic niet vergeten!
Sterker nog, ik ben bezig er een vrij uitgebreid & geïllustreerd artikel over te schijven (als vervolg op het genoemde quirksmode-artikel), want "even kort vertellen" bij deze helpmij-vraag blijkt ondoenlijk. En alleen een testpagina is misschien wel aardig, maar zonder toelichting zou zoiets nogal onbuikbaar zijn.

Het heeft namelijk nogal wat voeten in aarde om het alle browsers, browserversies en operating systems een beetje naar de zin te maken, gezien de enorme verschillen in styling van een file-input veld. Als eerste stap dit overzicht:

Al die dingen moeten dus met het nodige kunst- en vliegwerk gaan leiden tot één universele cross-browser opmaak ...
En in m'n eisenpakketje zit ook nog dat het toegankelijk moet zijn voor bezoekers die javascript en/of css uit hebben staan (bv. in pure text-browsers).

Maar tussen alle bedrijven door ben ik dus bezig. Wanneer het klusje geklaard is, kan ik nog niet voorspellen, want ook een serie IE-problemen moeten nog even opgelost worden.

Met vriendelijke groet,
CSShunter

Edit:
O ja, en als het even kan ook multiple uploads per pagina.

[Snarffy]

Nou CSSHunter, ikben intussen ook verder gegaan, mijn scherm ziet er nu zo uit in IE en FF en maak wel gebruik van js.

Enveloppe.jpg