CSS – Nascondi opzioni da Seleziona menu su iPhone e Safari

Quindi ho un sito che utilizza un menu di selezione per la navigazione mobile. Ho bisogno di hide alcune opzioni dalla lista, e sono stato in grado di farlo su tutti i browser e dispositivi tranne Safari e iPhone.

Ecco il css che ho usato per rimuovere gli elementi 7-11 nell’elenco:

select.select-menu option:nth-child(n+7):nth-child(-n+11){ display: none !important;} 

Funziona come previsto in Chrome e sul mio telefono Android. Tuttavia, quando visualizzi il sito in Safari o su un iPhone, le opzioni non sono nascoste e continuano a essere visualizzate.

Ho provato diverse opzioni e fatto molte ricerche sull’argomento e non riesco a trovare una soluzione. Ho provato a rimuovere gli elementi dall’elenco utilizzando jQuery e non riuscivo a farlo funzionare.

C’è un modo per hide le opzioni anche su iPhone e Safari?

MODIFICARE:

Ecco un violino: https://jsfiddle.net/cv6rubua/3/

Solo questo funziona per me: avvolgi l’elemento che devi hide. “if-check” per non avvolgerlo due volte se il nascondiglio è connesso con qualche azione sulla pagina.

Nascondi per iOS con jQuery:

 if( !($(this).parent().is('span')) ) $(this).wrap(''); 

Scopri per iOS con jQuery:

 if( ($(this).parent().is('span')) ) $(this).unwrap(); 

Hai un numero di opzioni a seconda di quello che vuoi, da Ho trovato display: none non funziona su Safari, ecco un metodo alternativo:

Puoi semplicemente renderlo super piccolo e invisibile:

 opacity: 0; height: 0; width: 0; overflow: hidden; 

Questo dovrebbe funzionare bene e dovrebbe essere supportato sia da Chrome che da Safari!

In bocca al lupo!

Non puoi Safari usa una sovrapposizione per i menu a discesa … Devi letteralmente rimuoverli …. C’è una modifica che usa span come syntax non valida … Non ti consigliamo di usare la syntax non valida anche se

Puoi risolverlo usando JavaScript

 var selectOption = document.querySelectorAll('.select-menu option'); for (var i = 0; i < selectOption.length; i++) { var item = selectOption[i]; if (item.innerHTML.charAt(0) === "–") { item.remove(); }; } 

Ho biforato il jsfiddle con una soluzione JavaScript dynamic: https://jsfiddle.net/davidgumzchoi/05ocw2x0/

La soluzione che ha funzionato per me era creare un’altra selezione nascosta che includesse tutte le opzioni e clonare quelle rilevanti alla selezione visibile. in questo modo si visualizza una delle opzioni che si desidera visualizzare, ma si conserva una registrazione delle altre opzioni in una lista nascosta.