In questa serie su Web Form, abbiamo imparato come creare e modellare vari controlli del modulo. L’ultima puntata ha spiegato come modellare etichette e pulsanti, nonché come modificare l’aspetto di un elemento in base alle interazioni dell’utente.

Nell’articolo di oggi, impareremo come modellare un paio di controlli notoriamente impegnativi: pulsanti di opzione e caselle di controllo.

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

Strategia generale

Il motivo per cui ho fatto riferimento ai pulsanti di opzione e alle caselle di controllo come “notoriamente impegnativi” nell’introduzione è che entrambi non sono per lo più influenzati dallo stile CSS. I soliti attributi che penseresti si applicherebbero ai pulsanti di opzione e alle caselle di controllo, come frontiera, colore, e colore di sfondo, fare niente! Detto questo, ci sono alcuni modi per aggirare queste limitazioni per personalizzare i pulsanti di opzione e le caselle di controllo in una varietà di modi accattivanti.

In questo momento, la strategia più comune per personalizzare i pulsanti di opzione e le caselle di controllo è:

1. Nascondi l’elemento di input.
2. Aggiungi un elemento span in più e applica il tuo stile personalizzato creando una classe.

Il resto di questo articolo esaminerà alcuni esempi.

Modificare lo stile dei pulsanti di opzione con CSS

Senza lo stile CSS, i pulsanti di opzione vengono visualizzati come un cerchio bianco con un punto nero o blu quando selezionati (a seconda del browser):

Questo è il markup HTML che ha creato il modulo sopra:

<h2>Styling Form Controls</h2>
<form id="register" name="register">
  <fieldset>
    <legend>Radio Buttons</legend>
      <p>Please select your favorite Pizza Topping:</p>
      <div class="divCSS">
        <input type="radio" id="pepperoni" name="toppings" value="pepperoni">
        <label for="pepperoni">Pepperoni</label>
        <input type="radio" id="mushrooms" name="toppings" value="mushrooms">
        <label for="mushrooms">Mushrooms</label>
        <input type="radio" id="other" name="toppings" value="other">
        <label for="other">Other</label>
      </div>
  </fieldset>
</form>

Nascondere l’elemento di input

La chiave per nascondere il pulsante di opzione standard è il aspetto esteriore proprietà CSS. Viene utilizzato per visualizzare un elemento utilizzando uno stile nativo della piattaforma, basato sul tema del sistema operativo. Il -aspetto-moz e -aspetto-webkit Le proprietà sono versioni non standard di questa proprietà, utilizzate rispettivamente dai browser Gecko (Firefox), basati su WebKit (es. Safari) e basati su Blink (es. Chrome, Opera) per ottenere lo stesso risultato. Impostazione del aspetto esteriore a ‘nessuno‘ rimuove l’aspetto di sfondo standard:

.divCSS > input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* ... */
}

Applicazione di stili personalizzati ai pulsanti di opzione

Fatto ciò, possiamo procedere allo stile dei pulsanti di opzione come vogliamo. Ecco gli stili per i pulsanti di opzione non selezionati:

.divCSS > input[type="radio"] {
  /* remove standard background appearance... */

  /* create custom radio button appearance */
  display: inline-block;
  width: 15px;
  height: 15px;  
  padding: 3px;
  background-clip: content-box;
  border: 2px solid #060c3b;
  border-radius: 50%;
  margin-right: 0;
}

Tutto ciò che dobbiamo aggiungere per i pulsanti di opzione selezionati è il colore del punto interno:

.divCSS > input[type="radio"]:checked {
  background-color: blue;
}

Stili vari per i pulsanti di opzione utilizzando i CSS

Scoprirai spesso che, quando personalizzi l’aspetto dei controlli del modulo, potresti voler personalizzare anche l’aspetto del testo dell’etichetta. Il seguente CSS imposta gli stili dei caratteri per il contenitore e aggiunge un margine a destra dell’etichetta per aiutare a distanziare i pulsanti di opzione:

.divCSS {
  font-family: Arial, Helvetica, sans-serif;
  color: #060c3b;
  font-weight: 500;
}

.divCSS > label {
  margin-right: 4px;
}

Ecco le nuovo e migliorato pulsanti di opzione prodotti da tutti gli stili di cui sopra:

Interazioni con i pulsanti di opzione

Una volta sostituiti i pulsanti di opzione standard con i tuoi, non c’è nulla che ti impedisca di attivare cambiamenti di stile in base alle azioni dell’utente come concentrarsi o passare con il mouse su un pulsante di opzione. Ecco alcuni CSS che aggiungono un’ombreggiatura interna al passaggio del mouse e uno schema a fuoco:

.divCSS > input[type="radio"]:hover {
    box-shadow: 0 0 5px 0px blue inset;
}

.divCSS > input[type="radio"]:focus {
   outline: 1px solid green;
}

Puoi vedere ciascuno degli stati di seguito:

Caselle di controllo dello stile nei CSS

Una notevole distinzione tra le caselle di controllo dello stile e i pulsanti di opzione è che, nel caso del primo, possiamo anche giocare con il simbolo del segno di spunta HTML (✓) per farlo sembrare giusto. Per impostazione predefinita, le caselle di controllo hanno un bordo grigio. Quando è selezionato, il colore dello sfondo cambia e all’interno della casella viene visualizzato un segno di spunta:

Duplichiamo il fieldset dei condimenti per pizza sopra in modo che l’utente possa ora selezionare più elementi:

<fieldset>
  <legend>Checkboxes</legend>
    <p>Please select your favorite Pizza Toppings:</p>
    <div class="divCheckboxes">
      <label class="checkbox">
        <input type="checkbox" />
        <span>Pepperoni</span>
      </label>
      <label class="checkbox">
        <input type="checkbox" />
        <span>Mushrooms</span>
      </label>
      <label class="checkbox">
        <input type="checkbox" />
        <span>Other</span>
      </label>
    </div>
</fieldset>

Applicazione di stili predefiniti alle caselle di controllo

Ancora una volta, possiamo usare il CSS aspetto esteriore proprietà per rimuovere tutto lo stile nativo prima di applicare i nostri stili:

.checkbox {
    display: inline-flex;
    cursor: pointer;
    position: relative;
}

.checkbox > span {
    color: #34495E;
    padding: 0.25rem 0.25rem;
}

.checkbox > input {
    height: 20px;
    width: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #34495E;
    border-radius: 4px;
    outline: none;
    transition-duration: 0.3s;
    transition-property: all;
    background-color: teal;
    cursor: pointer;
}

La maggior parte degli attributi di cui sopra probabilmente ti sembrano familiari ormai, ad eccezione dei due di transizione. Quando combinato con a proprietà di transizione di “Tutti“, durata della transizione animerà tutte le proprietà che possono eseguire la transizione tra questo selettore e quelle che lo sovrascrivono, come quelle che aggiungeremo per lo stato selezionato.

Alterare il controllato Stato

Lo stato di controllo viene ovviamente selezionato utilizzando il :controllato pseudo-classe. Ecco le regole che lo impiegano per indirizzare gli input controllati:

.checkbox > input:checked {
    border: 1px solid #41B883;
    background-color: #34495E;
}

.checkbox > input:checked + span::before {
    content: '2713';
    display: block;
    text-align: center;
    color: #41B883;
    position: absolute;
    left: 0.5rem;
    top: 0.2rem;
}

.checkbox > input:active {
    border: 2px solid #34495E;
}

Di queste regole, quella centrale è di particolare interesse; è quello che modella il segno di spunta. Il ‘2713‘ il contesto è il codice CSS per il simbolo del segno di spunta. Possiamo anche impostare il suo posizione, colore, e dimensione.

Ecco le caselle di controllo risultanti in azione:

Troverai la demo di questo tutorial su jsfiddle.net.

Conclusione sullo stile dei pulsanti di opzione CSS e delle caselle di controllo

In precedenza, l’unico modo per sovrascrivere l’aspetto predefinito dei pulsanti di opzione HTML e delle caselle di controllo era nasconderlo e utilizzare immagini SVG e codice JavaScript. Ora, grazie a The CSS aspetto esteriore proprietà e il simbolo del segno di spunta HTML, possiamo ottenere lo stesso risultato utilizzando puro CSS.

Nella prossima puntata, impareremo come definire lo stile delle selezioni HTML.