Come fare una casella di testo ovale su CSS

September 6

Come regola generale, le caselle di testo delle pagine Web sono di forma rettangolare, il più delle volte più largo che alto. Questa forma ha un senso, perché quando si digita un paragrafo di testo, si legge meglio all'interno di un rettangolo. L'applicazione di un raggio di confine il 50 per cento a una casella di testo cambierà la sua forma di un ovale, se si vuole uscire dalla scatola. Il testo sarà ancora apparire come normale, ma la forma che lo circonda diventerà ovale o, se si imposta la larghezza e l'altezza uguali tra loro, circolare.

istruzione

1 Aprire il codice sorgente per la pagina Web caricando il suo file HTML in Blocco note o un editor di codice. Trovare il codice casella di testo:

<Textarea id = "myoval"> </ textarea>

Aggiungere un nome di nome di ID, come mostrato, se non vi è ancora un ID per questa casella di testo. Avrete bisogno di questo per scrivere il codice CSS.

2 Aprire il foglio di stile CSS per il tuo sito e scorrere fino alla fine. Aggiungere una regola di stile che gli obiettivi la casella di testo con il suo nome ID:

myoval {

}

3 Impostare la larghezza e l'altezza della casella di testo all'interno della regola di stile:

myoval {

width: 400px;
height: 200px;
}

Quando si crea un ovale fuori della casella di testo, la larghezza e l'altezza abbastanza diverso quindi è visibilmente più lungo che largo o più largo che lungo.

4 Girare del bordo predefinito della casella di testo:

myoval {

border: 0;
}

È inoltre possibile specificare un nuovo confine:

border: 3px nero solido;

5 Applicare un raggio di confine del 50 per cento per la casella di testo:

myoval {

border: 0;
border-radius: 50%;
}

Gli elementi con uguale larghezza e altezza diventerà cerchi. Una casella di testo con una forma rettangolare diventerà un ovale.

Consigli e avvertenze

  • Aggiungere un sacco di imbottitura utilizzando "padding: XXpx" dove "XX" è il numero di pixel che si desidera aggiungere attorno al testo.