Problemi di "style" crossbrowser

Problemi di "style" crossbrowser postato il 19/05/2016 17:03:59 nel forum programmazione, open source e hosting

Buonasera a tutti :-)

So che il problema della compatibilità cross-browser, soprattutto per quanto riguarda l'estetica dei siti è un discorso infinito e mutevole... ciò nonostante ho un dubbio o meglio una domanda su un pezzo di codice che si vede bene su molti browser, ma a cilecca su mac....

Il codice in questione è un form, a scelta multipla, nel quale vorrei colorare diversamente (a seconda di una variabile del DB) e varie opzioni.

Il codice che funziona (ma non su mac) è:

<?php
while ($row_oggetti = mysql_fetch_array($sel_oggetti)) {

if ($row_oggetti[Uso] == 1){ //migliorato
echo "<option style='color:#267b17' value='<font color=267b17>$row_oggetti[Descrizione]</font> : $row_oggetti[IDOggetto]'> <font color=267b17>$row_oggetti[Descrizione]</font></option>"; }


else if ($row_oggetti[Uso] == 2){ //potenziato

echo "<option style='color:#3f87ff' value='<font color=3f87ff>$row_oggetti[Descrizione]</font> : $row_oggetti[IDOggetto]'> $row_oggetti[Descrizione]</option>"; }

else if ($row_oggetti[Uso] == 3){ //elite

echo "<option style='color:#f26522' value='<font color=f26522>$row_oggetti[Descrizione]</font> : $row_oggetti[IDOggetto]'> $row_oggetti[Descrizione]</option>"; }

else if ($row_oggetti[Uso] == 4){ //oro

echo "<option style='color:#e9ad42' value='<font color=e9ad42>$row_oggetti[Descrizione]</font> : $row_oggetti[IDOggetto]'> $row_oggetti[Descrizione]</option>"; }

else {

echo "<option style='color:#939393' value='<font color=939393>$row_oggetti[Descrizione]</font> : $row_oggetti[IDOggetto]'> $row_oggetti[Descrizione]</option>"; }
}
?>

Facendo delle prove (senza mac mi sono dovuto far aiutare da un utente che gioca da mac) ho notato che anche un codice così, con diversi tentativi, non funziona. Lui vede tutte le opzioni nere su bianco.

<form name="prova" action="Loadout.php" method="post">
<select name="Ogg">
<option value="" style='color:#267b17'> Arma Primaria </option>
<option value="" style="color:#267b17"> Arma Primaria </option>
<option value="" style='color:RED'> Arma Primaria </option>
<option value="" style="color:RED"> Arma Primaria </option>
</select>
</form>

Avete qualche idea su come risolvere il problema?

Grazie a tutti :-)

20/05/2016 01:09:34

Salve!

Per quanto sarebbe bello poterlo fare, stilare i tag option per i browser che utilizzano webkit su mac OS è attualmente impossibile: si può migliorare lo stile della select, ma non si può far niente per le singole voci :(

Tenendo questo a mente, puoi a parer mio vagliare diverse opzioni:
1. Mantenere lo stile così com'è: chi lo vede lo vede, chi non lo vede non lo vede (opzione possibile se il colore non pregiudica la fruibilità del contenuto o la comprensione di un'informazione importante);
2. Mantenere la select, pensando ad un altro modo per distinguere visivamente le varie voci (Aggiungere una dicitura in linea, riconoscibile, magari tra parentesi? Racchiudere le voci in un tag optgroup così da poter dare un titoletto diverso per ogni opzione o gruppo di opzioni?)
3. Abbandonare la select html e votarti al Javascript per creare una dropdown personalizzata di altro tipo.

20/05/2016 09:26:41

l'altra opzione è usare il .selectmenu di jQueryUI che è compatibile crossbrowser ed ha degli stili ottimi e già creati, facilmente personalizzabili.

Tutta la jQuery UI ha ottime soluzioni in generale, decisamente potenti soprattutto per la gestione degli eventi.


Selectmenu https://jqueryui.com/selectmenu/ ↗


se hai bisogno di aiuto nel capire come usarla, fai un fischio.