June 17
caselle di immissione testo HTML vengono utilizzati in forme per raccogliere informazioni sugli utenti. Intrinsecamente essi includono le ombre in base a ciò browser utilizzato. Safari, per esempio, ha il passaggio del mouse blu intorno alla casella quando è focalizzato sulla scatola. Utilizzando i CSS può rimuovere l'ombra da caselle di testo di input e personalizzarli per adattarsi al design del sito nel suo complesso. La maggior parte delle volte uno sviluppatore manterrà la sensazione di dialogo, ma di tanto in tanto una grafica verrà applicato a una casella di testo. Un'attività come la rimozione un'ombra testo dovessero sacrificare la funzionalità dell'elemento del modulo, ma migliorarla.
1 Aprire un editor di testo come Dreamweaver o BBEdit (vedi Risorse) e creare un file HTML. Inserire un modulo HTML di cui almeno un ingresso con type = "text". Creare un foglio di stile e il nome "main.css."
2 Creare una classe CSS per caselle di testo di input. Dategli un nome che è vicino a quello che sarà lo stile come "caselle di testo." Questo nome di classe risiederà nel file foglio di stile e terrà la definizione di stile per le caselle di testo.
3 Definire gli attributi della vostra classe CSS. Ecco alcuni esempi di attributi specifici si possono avere da definire:
border: 1px solid # 000000;
font-size: 14px;
color: # 333333;
padding: 5px 5px 5px 5px;
fondo: url ( "images / myinputbox.jpg") 0 0 no-repeat;
width: 300px;
position: relative;
float: left;
Cambiare l'attributo di confine è la più importante per cambiare qualsiasi attributo di input di testo. Che di solito è quello che determina l'ombra attorno alla casella di testo. Regolazione imbottitura consente di determinare la quantità di spazio (in pixel) da dentro la casella di testo. dimensione del carattere e il colore consentono di determinare la dimensione del testo della casella di input e di colore. L'aggiunta di uno sfondo consente di personalizzare la vostra casella di testo di input di seguire la progettazione del tuo sito web.
4 Aggiungere la classe si è creato a qualsiasi input di testo che si desidera stile. Seguire questo formato:
<Input type = "text" name = "MyTextBox" class = "caselle di testo" value = "test" />
Utilizzare la stessa classe per ogni casella di testo in modo che lo stesso stile verrà applicato allo stesso modo su tutte le caselle di testo di input.
5 Inserire il foglio di stile nel file HTML all'interno del tag <head>. Seguire questo formato:
<Link rel = "stylesheet" href = "main.css" type = "text / css" />
Aprire il file HTML in un browser Web e visualizzare la finestra di input (es) è stato creato. Rivedere foglio di stile, se necessario, per ottenere aspetto desiderato grafico.