Come creare una casella di testo e un'area di testo crossover dello stesso spessore?

Question

Impostare la larghezza della casella di testo (ad es. Input type = "text") e la textarea a 500px non funziona in IE6 e Chrome, funziona solo in FF2 (non hanno testato altri browser), IE e Chrome aggiungi due pixel alla casella di testo.

imbottitura e il margine è impostato a 0 su tutti gli elementi utilizzando

* 
{ 
margin: 0px; 
padding: 0px; 
} 

Modifica del tipo di documento da XHTML 1.0 di transizione a un regime rigoroso non ha funzionato troppo.

Answer 1

Prova

input{ 
border:none; 
} 

Answer 2

Si potrebbe avere una certa fortuna utilizzando un insieme di stili di reset nel CSS. Offrono una lunga strada per eliminare le differenze tra browser e browser tra il modo in cui gli elementi sono resi.

Eric Meyer (una delle migliori menti del Web sui CSS) descrive gli stili di reimpostazione e perché li utilizza here - con la sua ultima versione here.

Detto questo, senza conoscere l'effetto complessivo che si sta tentando di ottenere, gli elementi del modulo sono notoriamente difficili da stilare in un modo perfettamente coerente tra le piattaforme del browser. Buona fortuna. :)

Answer 3

È necessario impostare in modo esplicito un bordo di 1px e rendere la larghezza di 498px, oppure creare il bordo 0 e la larghezza di 500 px, anche se quest'ultimo renderà l'input impossibile da vedere se non si sa che è lì, quindi da lì è solo un problema di stile.

Answer 4

Penso anche che il problema sia al confine. Prova a definire lo stile del bordo specificamente per input/textarea insieme alla loro larghezza.

ingresso, area di testo { bordo: 1px grigio fisso; larghezza: 498 px; }

anche dare un'occhiata alla fonte se l'ingresso/textarea non è definito altrove o nel proprio tag (ad esempio dimensioni o righe/cols). Un'altra opzione quando IE si comporta male è l'uso di un file css speciale per questo. Comunque IMHO non dovrebbe essere necessario nel tuo caso.

Answer 5

Raccomanderei innanzitutto di evitare la regola di ripristino "a stella", in quanto porta solo problemi lungo la linea. Preferisco invece un reset specifico come

ul, ol, p, blockquote, h1, h2/ecc .../{margine: 0; padding: 0; }

ELEMENTI DI FORMA, infatti, è dove la regola stella fa più danno.

AFAIK, impostando il riempimento e la larghezza esplicitamente su una textarea e un elemento di input, darà l'esatta larghezza del pixel in tutti i browser.

IE6 aggiunge un margine di 1px al TOP e BOTTOM credo, non ai lati.

Ecco un esempio di una regola RESET taht Does'nt rompere le proprietà predefinite di elementi del modulo:

/*---------------------------*/ 
/* Base rules & reset */ 
/*---------------------------*/ 

body { 
    font-size:11px; line-height:1.2em; font-family:Verdana, Arial, sans-serif; 
    margin:0; padding:0; 
    background:#fff url(/01/images/cassis/body-bg.gif) repeat-x 50% 0; 
    color:#303030; 
} 

p, pre, blockquote, address, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, form, label, fieldset { margin:0; padding:0; } 
ul, ol, li { list-style:none; } 
input, select, textarea { font:11px Arial, sans-serif; color:#333; line-height:1.2em; } 
table, caption, td, th { margin:0; padding:0; font-size:11px; line-height:1.2em; font-weight:normal; } 
img { display:inline; } 

/* cross-browser clearing of floats (no extra space in IE) */ 
div.clear { clear:both; overflow:hidden; height:0; } 

Questi sono solo casuali, ma si ottiene l'idea. Non cancellare margine e riempimento su tutto, è molto più sicuro cancellare ciò che è necessario e lasciare le impostazioni predefinite del browser altrove.

Answer 6

<!--***********************CSS**************************--> 
<style> 

.set_font 

{ 

font-family:verdana; 

font-size:10px; 

color:#ffffff; 

width:250px; 

} 

.set_font2 

{ 

font-family:verdana; 

font-size:10px; 

color:#000000; 

width:250px; 

} 
</style> 
<!--*******************HTML**************************--> 
<input type="text" size="33" class="set_font2" name="inputName" id="inputName" value="inputValue" maxlength="50"> 
<textarea cols="30" rows="8" class="set_font2" name="inputName" id="inputName">inputValue</textarea> 

Answer 7

Ho sperimentato e ho scoperto che "il rapporto" tra testo e area di testo può essere calcolato utilizzando 21 * 8 * x.

Se hai

< input type = "text" size = "X" /> < br /> < cols textarea = "X"> </textarea>

... e vuoi che siano ugualmente larghi, usa questa formula per calcolare la larghezza per il testo di input.

se x = 70 poi 21 * 8 * 70 = 581px

Così si scriverà:

< input type = "text" size = "70" style = "width: 581px "/> < br /> < textarea cols =" 70" > </textarea>

I due diventeranno uguali!

In questo modo in un programma/sito Web/etc è possibile immettere lo stesso valore e ottenere lo stesso risultato (colonne in textarea)!

Answer 8

Uso CSS3 per rendere la casella di testo e l'input funzionano allo stesso modo. See jsFiddle.

.textarea, .textbox { 
    width: 200px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Lavori in IE8 +, see caniuse.