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

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.

Definiremo la freccia come un :dopo pseudo-elemento del .Selezionare

:

.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%);
  }
}

Forse ti starai chiedendo cosa &::dopo fa. Fa parte di Sass (Syntactically Awesome StyleSheets), che è un’estensione CSS che si compila direttamente in CSS. Rende i CSS più facili da codificare ed elimina molte duplicazioni. Lo fa – almeno in parte – attraverso il nesting. Il carattere e commerciale si riferisce al selettore genitore durante l’annidamento.

Posizionamento della freccia

Al fine di ospitare il :dopodi larghezza, dobbiamo aggiornare il .Selezionare regola per utilizzare un layout di griglia CSS. Quindi, per posizionare la freccia, definiremo a aree-modello-griglia chiamato “Selezionare” e aggiungi una regola che lo assegni al elemento e ::dopo contenuto. Il aree-modello-griglia La proprietà specifica le aree all’interno del layout della griglia. Puoi nominare gli elementi della griglia usando il griglia-area proprietà, quindi fare riferimento al nome definito da proprietà grid-template-areas:

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

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

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

Ora possiamo dire al .Selezionare a allinea-oggetti al centro (vedi frammento sopra), mentre si allinea il ::dopo contenuto alla “fine” tramite il giustificarsi attributo:

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

Ecco finalmente il risultato finale:

Crea selezione CSS personalizzata

Troverai la demo di questo tutorial su codepen.io.

Conclusione

In questa puntata della serie Costruisci un modulo Web con HTML, abbiamo utilizzato diverse nuove proprietà CSS, tra cui aspetto esteriore e aree-modello-griglia per personalizzare l’aspetto di un elemento e come disabilitare i controlli personalizzati. Il finale della serie cambierà marcia per spiegare il ruolo di JavaScript nel rendere i moduli HTML più interattivi.

Source link

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.