Mr. Webmaster Blog Menu
  • Home
  • Cerca
  • Argomenti del Blog
    • A
    • Apple
    • B
    • Browser
    • C
    • CMS
    • D
    • Database
    • E
    • Eventi & WorkShop
    • F
    • Freelance
    • G
    • Grafica
    • H
    • Hosting
    • I
    • IoT
    • L
    • Linux
    • M
    • Makers
    • Mobile
    • Mr. Webmaster
    • O
    • Online Apps
    • Open Source
    • P
    • Programmazione
    • R
    • Reti
    • S
    • Scripting
    • Senza Rete
    • Sicurezza
    • Social Network
    • W
    • Web Design
    • Web e Diritto
    • Web e Lavoro
    • Web Marketing
    • Web Server
    • Web Writing
    • Windows
  • Network
  • Corsi on-line
Mr.Webmaster Blog→Web Design→Rimuovere gli spazi bianchi da campi di testo e textarea
  • 24
    OTT
    2012

Rimuovere gli spazi bianchi da campi di testo e textarea

Scritto da Claudio Garau | Web Design

Roger Johansson di 456bereastreet.com ha recentemente pubblicato un nuovo interessante articolo dedicato alla rimozione degli spazi bianchi attorno alle textarea e ai campi di input testuali; il post nascerebbe da una recente osservazione dello sviluppatore che ha rivelato di non aver mai fatto caso alla quantità di spazio bianco che viene generata automaticamente lungo i bordi degli elementi considerati.

Questo fenomeno può essere facilmente adattato sulla base dei propri progetti in modo da controllare e personalizzare gli spazi bianchi, il Webdesigner dovrà però tenere conto delle immancabili problematiche cross-browser che potrebbero dar luogo a risultati imprevisti dovuti a comportamenti differenti in seguito alla definizione delle regole di stile; a questo scopo Johansson propone una semplice soluzione che dovrebbe consentire di rendere omogeneo il rendering sui vari programmi di navigazione:

input,
textarea {
    margin:0;
    vertical-align:bottom;
}

La necessità di tale fix deriverebbe dal fatto che ogni browser ha un suo diverso modo di gestire gli spazi bianchi relativi ai campi di testo:

  • Internet Explorer non li aggiungerebbe o li inserirebbe in modo impercettibile;
  • Firefox si limiterebbe ad aggiungere un limitato spazio verticale attorno alle textarea, ciò non avverrebbe invece per gli input text;
  • Safari, Chrome e le altre applicazioni basate sull’engine WebKit inserirebbero spazi bianchi intorno ad entrambi gli elementi;
  • Opera aggiungerebbe spazi bianchi su Mac Os X ma non su Windows.

Naturalmente, il fix proposto potrà essere personalizzato, se per esempio si volesse applicare la regola soltanto agli input text si dovrebbe sostituire “input” con “input[type=”text”]”.

  • cross-browser
  • CSS
  • input text
  • spazi bianchi
  • textarea
  • WebKit

Naviga tra i post del Blog

← Canonical prepara Ubuntu 13.04 Raring Ringtail
→ Fine Uploader: file upload con JavaScript

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
Post correlati
  • Textarea senza scrollbar in IExplorer 14/03/2010
  • Ripulire una textarea con un click 14/12/2010
  • Contare i caratteri all’interno di una textarea usando jQuery 17/12/2010
  • iPad: eliminare l’ombra dai campi di input 29/11/2011
  • Campi input “file” customizzati con jQuery e CSS 13/07/2012
I post più letti del mese
  • html-codiceApostrofi e virgolette in pagine HTML: come gestirli nel modo giusto01/01/1970
  • Loading in attesa del caricamento della paginaLoading in attesa del caricamento della pagina01/01/1970
  • 16 layout CSS pronti da usare16 layout CSS pronti da usare01/01/1970
  • Uso corretto e sintassi del tag "br"Uso corretto e sintassi del tag "br"01/01/1970
  • Centrare una tabella con i CSSCentrare una tabella con i CSS01/01/1970
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2018 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: info legali / privacy / cookie