Extra padding in <input type = "text">

Sembra che ogni browser aggiunga delle imbottiture magiche codificate all'interno di <input type="text">. Alcuni browser (IE, Safari, Chrome) rendono la casella di input un po 'più alta, ma si allineano correttamente come se fosse un normale elemento HTML. Posso vivere con l'altezza extra. Ma alcuni browser si comportano male (Firefox e Opera) e provano anche ad allineare verticalmente il testo o ad aggiungere qualche padding extra sopra di esso. Sono sorpreso che i moderni browser non permettano di impaginare le caselle di testo come se fossero allo stesso modo dell'HTML e aggiungere un po 'di formattazione magica. Sto facendo qualcosa di sbagliato? Mi manca qualche trucco? Sono alcune proprietà CSS proprietarie che potrebbero aiutarmi? Ho esaminato brevemente la documentazione di Firefox CSS, ma non sono riuscito a trovarne. In alternativa, potrei usare HTML modificabile invece di <input type="text">.Extra padding in <input type = "text">

Ecco un frammento che illustra il problema:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

    <title>Test</title> 

    <style type="text/css"> 

     body, input { 
      font-family: sans-serif; 
      font-size: 16pt; 
      color: White; } 

     #textbox { 
      position: absolute; 
      left: 20px; 
      top: 20px; 
      width: 100px; 
      background-color: #A5C9E2; 
      line-height: 16pt; 
      padding: 0px; 
      margin: 0px; 
      border-width: 0px; } 

     #box { 
      position: absolute; 
      left: 120px; 
      top: 20px; 
      width: 100px; 
      background-color: #AFD66A; 
      line-height: 16pt; } 

    </style> 

</head> 
<body> 

    <input type="text" id="textbox" value="Hello"> 

    <div id="box">Hello</div> 

</body> 
</html>

Edit: ho sperimentato un po 'con -moz-outline e -moz-box-sizing in Firefox (solo nel caso), ma nessuno di loro valori rimuove l'imbottitura extra.

fonte

2009-12-04 Jan Zich

Iniziare chiudendo l'input: .... = "Ciao" /> – joshcomley

È effettivamente valido poiché non utilizza XHTML. –

Credo che sia valido in HTML 4.01 Transitional, ma sicuramente, non è il problema. –

Ho sperimentato cambiando i valori dell'altezza della linea e della dimensione del font a 20px e quindi ispezionando l'elemento con Firebug. Le proprietà clientHeight e offsetHeight sono entrambe di 24px (ma poiché tali proprietà includono qualsiasi padding impostato sull'elemento non sono sicuro se questo è il browser che espande l'altezza dell'elemento o aggiunge padding).

L'impostazione in modo esplicito dell'altezza dell'ingresso deve essere uguale all'altezza della riga sembra fare ciò che si desidera, ovvero line-height: 16pt; height: 16pt; - ma sospetto che funzioni ritagliando l'elemento, come la posizione verticale del testo all'interno dell'input non cambia.

fonte

2009-12-04 13:23:03

È possibile eliminare questo riempimento aggiuntivo modificando il ridimensionamento della casella dell'input.

-moz-box-sizing: content-box; 
-webkit-box-sizing: content-box; 
box-sizing: content-box;

Fa sì che i browser moderni si comportino allo stesso modo. Potrebbe essere necessario indirizzare specificamente IE.

fonte

2010-08-02 21:00:40 jessebeach

Sto provando ad applicarlo a 'input [type = "search"] 'e c'è ancora un pixel di" padding "in Firefox di cui non riesco a liberarmi ... –

Extra padding in <input type = "text">

risposta

Problemi correlati