Wie kann ich einem Textfeld Text hinzufügen, ohne dass die Breite zunimmt?

Question

Ich hatte Probleme mit der Breite eines Textfelder-Elements und der Verwendung von Padding über CSS. Der Füllwert scheint die Breite des Textfelds zu ändern, was ich lieber nicht tun würde.

Das ist mein HTML-Code:

<div id="body"> 
    <textarea id="editor"></textarea> 
</div> 

Und mein CSS-Code:

#body { 
    height:100%; 
    width:100%; 
    display:block; 
} 

#editor { 
    height:100%; 
    width:100%; 
    display:block; 
    padding-left:350px; 
    padding-right:350px; 
} 

jedoch die padding Werte erscheinen nicht, wie man erwarten würde, zu arbeiten. Die Breite des Textfelds wird in beiden Richtungen um 350 px erhöht, anstatt den Abstand zwischen den Grenzen des Elements und seinem Inhalt zu definieren.

Ich habe nur über das Zentrieren der Textfläche durch Festlegen der Ränder bei "0px auto" gedacht, aber ich möchte, dass der Benutzer immer noch durch die Textfläche scrollen kann, wenn die Maus über einen der leeren Ränder schwebt. Aus dem gleichen Grund kann ich kein weiteres div hinzufügen, um als Wrapper zu fungieren, da der Benutzer nicht in der Lage wäre, entlang der leeren Bereiche zu scrollen, sondern nur entlang des randlosen Textareals.

Kann jemand helfen?

Answer 1

Die CSS box model definiert "Breite" als die Breite des Inhalts, ohne Rand, Polsterung und Rand.

Glücklicherweise hat CSS3 eine neue box-sizing Eigenschaft, die Sie dieses Verhalten ändern kann, stattdessen Polsterung usw. in der angegebenen Breite sind mit:

box-sizing: border-box; 

Nach dem obigen Link, die meisten modernen Browser (einschließlich IE> = 8) unterstützen diese Eigenschaft, aber sie haben unterschiedliche Namen in jedem Browser.

Answer 2

Die von CSS angegebene Breite enthält keine Auffüllung oder Begrenzung (gemäß W3C-Spezifikationen). Ich denke, ein Weg, es zu tun, ist mit etwas JavaScript, das die Breite von #editor auf die Breite von # Körper minus 700px setzt, aber das ist ein bisschen chaotisch ... Nicht sicher, ob es eine CSS-Art zu tun, was Sie hier wollen. Natürlich können Sie Marge verwenden, dann registrieren Sie das onMouseWheel -Ereignis auf die # Körper und damit arbeiten ...

Answer 3

Die Angabe von Breiten und Rändern/Abstand in "%" hilft. Hier ist ein Beispiel -

Live @http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

#body { 
    background-color:#ccc; 
    height:100%; 
    width:100%; 
    display:block; 
} 

textarea#editor { 
    border:none; 
    width:80%; 
    height:100%; 
    margin-left:10%; 
    margin-right:10%; 
} 

Answer 4

Einige Browser können Sie den Platzhalter Ziel für die Farbe usw. zu ändern, so können Sie Polsterung als auch hinzufügen:

::-webkit-input-placeholder { /* WebKit browsers */ 
    padding: 5px 0 0 5px; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    padding: 5px 0 0 5px; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    padding: 5px 0 0 5px; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    padding: 5px 0 0 5px; 
}