In questa serie sui Web Form, abbiamo imparato come creare e modellare vari controlli del modulo. Nell’ultima puntata, abbiamo imparato a dare uno stile ai pulsanti di opzione e alle caselle di controllo nascondendoli prima usando il aspetto esteriore proprietà CSS. Metteremo ancora una volta il aspetto esteriore proprietà da utilizzare per personalizzare l’aspetto del elemento. È difficile per diversi motivi. Per cominciare, il controllo è composto da diversi sottocomponenti. Inoltre, può essere visualizzato anche come elenco per accettare selezioni multiple. Infine, l’aspetto di Select dovrebbe cambiare quando disabilitato. L’articolo di oggi riguarderà lo standard elemento, mentre il prossimo coprirà il multiplo nonché come disabilitare i controlli personalizzati.

Prima di andare avanti, tuttavia, potresti voler rinfrescare la tua memoria rivisitando i precedenti articoli di questa serie:

Anatomia di uno standard

Come puoi vedere nell’immagine qui sotto, lo standard l’elemento è costituito da diverse parti costitutive, tra cui un campo di testo di sola lettura che mostra l’elemento attualmente selezionato, un’icona a forma di freccia e un elenco a discesa:

In termini di markup, il contiene una serie di opzioni. Questi costituiscono gli elementi che appaiono nell’elenco a discesa, quando si fa clic sulla freccia verso il basso o su qualsiasi parte del campo di testo. Ecco il markup per a che consente all’utente di scegliere un singolo preferito da un artista musicale completamente casuale:

<label for="standard-select">Standard Select</label>
<div class="select">
  <select id="standard-select">
    <option selected disabled>Make a selection</option>
    <option value="MIaM">Mouse In A Maze</option>
    <option value="PL">Private Life</option>
    <option value="SA">Suspended Animation</option>
    <option value="NQ">No Quarter</option>
    <option value="11:11">11:11 Ultimate Edition</option>
    <option value="UV">Ultraviolence</option>
    <option value="TC">The Core (with outro solo)</option>
    <option value="TK">Telekinetic Killer</option>
    <option value="ALL">All of the above</option>
    <option value="NONE">None of the above</option>
  </select>
  <span class="focus"></span>
</div>

Come ripristinare gli stili CSS

Come abbiamo fatto in precedenza con i pulsanti di opzione e le caselle di controllo, rimuoveremo il controllo nativo utilizzando il pulsante aspetto esteriore attributo. Il seguente CSS rimuoverà anche la freccia a discesa:

select {
  // styles reset, including removing the default dropdown arrow
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;

  // Stack above custom arrow
  z-index: 1;

  // Remove focus outline, will add on alternate element
  outline: none;
}

Il imbottitura è una proprietà abbreviata che imposta un valore a ciascuno dei ‘s quattro lati, per cui:

• il riempimento superiore è 0 (nota che le unità non sono necessarie per i valori zero)
• il padding destro è 1em (il em l’unità è relativa alla dimensione del carattere dell’elemento, quindi 1em significa la stessa dimensione del carattere corrente)
• l’imbottitura inferiore è 0
• l’imbottitura sinistra è 0

Aggiunta dei nostri stili

La prossima serie di regole personalizza l’aspetto del nostro prendendo di mira il

che racchiude il elemento:

Ma prima di arrivare a questo, ecco qualcosa nel CSS che potresti non aver visto prima:

:root {
  --select-border: #393939;
  --select-focus: #101484;
  --select-arrow: var(--select-border);
}

Queste sono variabili CSS. Sono davvero utili per definire i colori che vorresti usare in alcuni punti. Il variabile() Il metodo legge il valore della variabile. Puoi vedere il –seleziona-bordo variabile che si legge di seguito:

.select {
  width: 100%;
  min-width: 15ch;
  max-width: 30ch;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;
  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}

Il ch è un’unità CSS relativa alla larghezza del carattere del “0” (zero). Quindi, un valore di 15ch è 15 volte la larghezza del carattere “0“.

Ecco il nostro a questo punto:

Notare che manca ancora la freccia verso il basso. Aggiungiamolo ora.

Creazione della freccia personalizzata in CSS

Per eseguire il rendering della freccia a discesa, utilizzeremo una moderna proprietà CSS chiamata percorso di clip. I tracciati di ritaglio ci consentono di creare tutti i tipi di forme “tagliando” le forme altrimenti quadrate e rettangolari che otteniamo come predefinite per la maggior parte degli elementi. Prima del percorso di clip attributo, SVG sarebbe stata la soluzione ideale. Tuttavia, non funziona bene come sfondo perché non possiamo alterarne l’aspetto in alcun modo senza ridefinire completamente l’SVG. Non supporterebbe nemmeno l’uso di variabili personalizzate CSS.

.select {
  //custom select rules...
  
  //Custom arrow
  &::after {
    content: "";
    justify-self: end;
    width: 0.8em;
    height: 0.5em;
    background-color: var(--select-arrow);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  }
}

.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;

  select,
  &::after {
    grid-area: select;
  }

  min-width: 15ch;
  max-width: 30ch;
  //etc...
}

//Custom arrow
&::after {
  content: "";
  justify-self: end;
  //etc...
}