Un modo per produrre una sottolineatura a catino reattivo che non deve essere modificato indipendentemente dell'imbottitura che viene applicato sull'elemento è quello di utilizzare linear-gradient immagine di sfondo. Possono essere dati background-size in valori di pixel e posizionati nella parte inferiore dell'elemento.
L'approccio sé è abbastanza semplice:
- Usiamo un
border-bottom di 1px spessore per produrre il bordo inferiore.
- Un gradiente lineare che viene colorato in rosso per 2px e trasparente per il resto viene aggiunto all'elemento ed è posizionato nella parte inferiore dell'elemento.
- L'impostazione
background-size determina l'altezza dei bordi sinistro e destro. Nello snippet, ho impostato la dimensione dello sfondo come 100% 5px e quindi 5px sarà l'altezza fissa dei bordi sinistro e destro. La loro altezza può essere aumentata diminuendo modificando solo questo parametro.
background-repeat è impostato in modo che l'immagine di sfondo si ripeta sull'asse x e impostando un offset negativo di 1px per background-position, ci si assicura che solo 1px del bordo rosso della prima tessera del gradiente sia mostrato sulla sinistra.Dato che abbiamo repeat-x on e la dimensione dello sfondo è solo del 100%, la seconda porzione dell'asse x inizierà da 1px prima della fine a destra e quindi questo produrrebbe il bordo 1px sul lato destro.
Nota: scatola di ombra ha il vantaggio rispetto questo approccio in termini di supporto del browser. Questo è solo IE10 +.
input {
background-color: transparent;
height: 20px;
width: 300px;
padding:10px 5px;
border: 0;
border-bottom: 1px solid red;
background-image: linear-gradient(to right, red 2px, transparent 2px);
background-repeat: repeat-x;
background-size: 100% 10px;
background-position: -1px 100%;
}
input:nth-child(2) {
padding: 0 5px;
}
input:nth-child(3) {
padding: 10px 10px 1px;
}
input:nth-child(4) {
height: 20px;
padding: 10px 10px 1px;
}
<!-- prefix free library is optional and is only to avoid browser prefixing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type="text" placeholder="Example">
<br/>
<input type="text" placeholder="Example2">
<br/>
<input type="text" placeholder="Example3">
<br/>
<input type="text" placeholder="Example4">
E 'possibile modificare la larghezza della linea a '1px'? Inoltre, quando lo uso su un input con padding, le linee sul lato diventano troppo lunghe. È possibile dare a questi un'altezza fissa? –
@Duncan è necessario adattare il raggio di diffusione e lo spostamento Y dell'ombra del riquadro per rendere le linee sinistra e destra l'altezza desiderata. Sfortunatamente la loro altezza cambierà in base all'altezza dell'input. Farò un altro esempio. –
[Un esempio di cosa intendo] (https://jsfiddle.net/38f5ygpe/1/) –