I tag select sono i più complessi da rendere simili su tutti i browser, perché molti engine (ad esempio, Safari) aggiungono effetti come bordi. Fortunatamente, è possibile intervenire attraverso l'uso di una semplice serie di proprietà a livello CSS, che vanno ad azzerare lo stile di default (appearance e i vendor prefix che vengono impostati su none), per poi intervenire con un semplice trucco, piazzando un'immagine vettoriale encodata in formato base64 come sfondo (l'ultima parte della direttiva).
select{ -moz-appearance:none; -webkit-appearance:none; appearance:none; border: 1px solid #333; color: #333; height: 30px; -webkit-border-radius:0; border-radius:0; min-width:300px; background: #fff; background-position-x: 98% 95%; background-repeat: no-repeat; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0LjkgMTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQuOSAxMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzQ0NDQ0NDt9DQo8L3N0eWxlPg0KPHRpdGxlPmFycm93czwvdGl0bGU+DQo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEuNCw0LjcgMi41LDMuMiAzLjUsNC43ICIvPg0KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIzLjUsNS4zIDIuNSw2LjggMS40LDUuMyAiLz4NCjwvc3ZnPg=="); }
L'effetto che si ottiene è il seguente:
Il contenuto dell'immagine sfrutta la possibilità per i browser moderni di caricare uno sfondo attraverso SVG, un formato vettoriale, di cui riportiamo di seguito la forma utilizzata:
<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 4.9 10" style="enable-background:new 0 0 4.9 10;" xml:space="preserve"> <style type="text/css"> .st0{fill:#444444;} </style> <title>arrows</title> <polygon class="st0" points="1.4,4.7 2.5,3.2 3.5,4.7 "/> <polygon class="st0" points="3.5,5.3 2.5,6.8 1.4,5.3 "/> </svg>
Basta intervenire sul colore di riempimento (in questo caso #444444) e sostituirlo con quello preferito, per poi procedere ad encodare di nuovo il tutto in formato Base64 e sostituirlo all'interno della proprietà background-image.
Utilizzando prima background, ci si assicura il supporto ai vecchi browser, che ignoreranno la direttiva, mostreranno il loro elemento grafico predefinito e comunque manterranno un colore di sfondo in linea con le nostre aspettative.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare un'applicazione React e configurare Tailwind CSS
Ottimizzazione dei block template in Angular 17
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Sfruttare GPT-4o realtime su Azure Open AI per conversazioni vocali
Gestione degli stili CSS con le regole @layer
Ordine e importanza per @layer in CSS
Creare una libreria CSS universale: Clip-path
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Usare le collection expression per inizializzare una lista di oggetti in C#
Referenziare un @layer più alto in CSS
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Utilizzare il trigger SQL con le Azure Function
I più letti di oggi
- Utilizzare AAD su SQL Database durante lo sviluppo con Visual Studio
- Utilizzare il TransferControl in Windows Phone
- Gestione dei token negli input di testo con la Universal Windows Platform
- Dare temporaneamente accesso ad un blob di Azure Storage
- Impostare le policy CORS con Azure API Management
- Utilizzare database e servizi con gli add-on di Container App
- Utilizzare HttpModule in modalità asincrona
- Indicizzare i Blob Storage con Azure Search
- Creazione di StateTrigger personalizzati in Universal Windows Platform
- Modificare i criteri della clausola Where del LinqDataSource di ASP.NET