Hallo,

Dit werkt prima in Chrome maar niet in Firefox.
Weet iemand hoe ik dit wel kan laten werken in Firefox?
<?php
echo '<select>';
echo '<option>Kies een kleur </option>';
foreach(array('magenta','white','yellow','blue','green','black') as $kleur)
{ echo '<option style="background-color:'.$kleur.';"> </option>';
}
echo '</select>';
?>
Welke Firefox heb jij eigenlijk? Want vanaf 47 is het stuk gegaan, of bewust gesloopt.
Ik heb inmiddels de nieuwste (57) en hier werkt het wel (weer):

https://jsfiddle.net/m7b4h7cz/

Ik las op Stackoverflow wel dat het lokaal werkend te krijgen was met een oplossing:

Ok, so the solution here is to disable -> Multiprocess Windows

type about:config in the browser

then search for browser.tabs.remote.autostart (mine had a browser.tabs.remote.autostart.2)

change this to FALSE then restart the browser this will make firefox run Multiprocess Windows disabled which fixes the issue


Een oplossing zou dit kunnen zijn, vond ik net:

option {
  -moz-appearance: none;
}

Firefox 57.0-2

Ik wil het natuurlijk niet alleen local oplossen.
Het moet gewoon op Internet bij iedereen werken.

[size=xsmall]Toevoeging op 16/11/2017 14:15:42:[/size]

- Ariën - op 16/11/2017 14:04:55


option {
  -moz-appearance: none;
}


Je krijgt hiermee een andere select layout, maar geen kleuren.
In die property kan je ook per stuk andere values proberen:
Zo heb je: normal|icon|window|button|menu|field;

Ik denk dat normal,menu of field wel een oplossing kan geven?
Zo te zien ligt dit aan het een instelling in het OS die gebruikt wordt. Welke heb jij?
Hier heb ik 64-bit Windows 10.
- Ariën - op 16/11/2017 14:04:55

type about:config in the browser
then search for browser.tabs.remote.autostart (mine had a browser.tabs.remote.autostart.2)
change this to FALSE then restart the browser this will make firefox run Multiprocess Windows disabled which fixes the issue

Dit werkt inderdaad, maar alleen local uiteraard.
Dus dat is geen oplossing.

[size=xsmall]Toevoeging op 16/11/2017 14:28:41:[/size]

Ik heb hier Fedora.
Maar ik zoek een oplossing die overal voor Firefox werkt.
Maar die property dan, die je op andere values kan zetten dan enkel none?
Als dat echt niet werkt, dan vrees ik dat je met JS en CSS een eigen drop-down moet maken.

Hier werkt het wel, en ik heb geen inzicht in het publiek bij wie het niet zou werken.
En als je de options nu eens wat inhoud geeft? Bijvoorbeeld &nbsp;?

Of staat het vast dat ie problemen heeft met achtergrondkleuren, en niet zozeer met het renderen van "lege" opties?
- Ariën - op 16/11/2017 14:33:34

Maar die property dan, die je op andere values kan zetten dan enkel none?
Als dat echt niet werkt, dan vrees ik dat je met JS en CSS een eigen drop-down moet maken.

Hier werkt het wel, en ik heb geen inzicht in het publiek bij wie het niet zou werken.


Hoe heb je dat dan gedaan?

[size=xsmall]Toevoeging op 17/11/2017 00:16:05:[/size]

Thomas van den Heuvel op 17/11/2017 00:08:18

En als je de options nu eens wat inhoud geeft? Bijvoorbeeld &nbsp;?

Of staat het vast dat ie problemen heeft met achtergrondkleuren, en niet zozeer met het renderen van "lege" opties?


Ik heb er een spatie in staan.
Ik heb op de site van Mozilla Firefox gekeken en daar is te vinden dat die css uit is gezet.
Ook andere dingen voor <option>.
Lijkt mij het beste om een hidden form field te gebruiken waarin de gekozen waarde op te slaan en verder javascript en bijv. div's te gebruiken omdat veel devices op hun eigen wijze met dropdowns omgaan. Neem nou de iPhone:
En waarom geen
<input type="color">
(teveel keuze?)

Reageren