Jak mogę utworzyć obszar tekstowy o szerokości 100% bez przepełnienia, gdy wypełnienie jest obecne w CSS?
Renderuję następujący fragment CSS i HTML.
textarea
{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<textarea cols="2" rows="10" id="rules"/>
</div>
Problem polega na tym, że obszar tekstowy jest 8px szerszy (2px dla obramowania + 6px dla wypełnienia) niż rodzic. Czy istnieje sposób, aby nadal używać obramowania i wypełnienia, ale ograniczyć Całkowity rozmiar textarea
do szerokości rodzica?
14 answers
Dlaczego nie? Zapomnij o hackach i po prostu zrób to za pomocą CSS?
Jeden używam często:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Zobacz obsługę przeglądarki tutaj .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-15 10:16:10
Odpowiedzią na wiele problemów z formatowaniem CSS wydaje się być "dodaj kolejny
Więc, w tym duchu, próbowałeś dodać wrapper div, do którego nakładane są obramowania/wypełnienia, a następnie umieścić pole tekstowe o szerokości 100% wewnątrz tego? Coś jak (nieprzetestowane):
textarea
{
width:100%;
}
.textwrapper
{
border:1px solid #999999;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-26 05:48:09
Rozważmy końcowe wyjście renderowane użytkownikowi tego, co chcemy osiągnąć: wyściełany obszar tekstowy z obramowaniem i wyściółką, które cechują się tym, że kliknięcie przekazuje fokus do naszej strefy tekstowej, oraz zaletą automatycznego 100% szerokości typowego dla elementów blokowych.
Moim zdaniem najlepszym podejściem jest stosowanie rozwiązań niskiego poziomu w miarę możliwości, aby osiągnąć maksymalną obsługę przeglądarek. W tym przypadku tylko HTML może działać dobrze, unikając użycia Javascript (który zresztą wszyscy kochamy).
Znacznik etykiety jest w naszej pomocy, ponieważ ma takie zachowanie i może zawierać elementy wejściowe, do których musi adresować. Jego domyślnym stylem jest jeden z elementów inline, więc, dając etykiecie styl wyświetlania bloków możemy skorzystać z automatycznej szerokości 100%, w tym wypełnienia i obramowania, podczas gdy wewnętrzna Strefa tekstowa nie ma obramowania, bez wypełnienia i 100% szerokości.
Przyjrzyjmy się W3C specyfice innych zalet możemy Uwaga:
- Atrybut " for " nie jest wymagany: gdy znacznik etykiety zawiera docelowe wejście, automatycznie skupia wejście potomne po kliknięciu;
- jeśli zewnętrzna etykieta dla textarea została już zaprojektowana, nie występują konflikty, ponieważ dane wejście może mieć jedną lub więcej etykiet.
Zobacz szczegóły W3C aby uzyskać bardziej szczegółowe informacje.
Prosty przykład:
<html>
<head>
<style type="text/css">
.container { width: 400px; border: 3px solid #f7c; }
.textareaContainer {
display: block;
border: 3px solid #38c;
padding: 10px;
}
textarea { width: 100%; margin: 0; padding: 0; border-width: 0; }
</style>
</head>
<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>
</html>
Wyściółka i obramowanie .textareaContainer elements są te, które chcemy dać do textarea. Spróbuj je edytować, aby stylować je tak, jak chcesz. Dałem duże i widoczne wyściółki i obramowania do .element textareaContainer pozwala zobaczyć ich zachowanie po kliknięciu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-15 09:37:16
Jeśli nie przejmujesz się szerokością wyściółki, rozwiązanie to również zachowa wyściółkę w procentach..
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
Nie idealnie, ale dostaniesz trochę wyściółki, a szerokość dodaje się do 100%, więc wszystko jest dobre
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-02 09:22:48
Natknąłem się na inne rozwiązanie tutaj to jest takie proste: dodać padding-right do kontenera textarea. Pozwala to zachować margines, obramowanie i wypełnienie na obszarze tekstowym, co pozwala uniknąć problemu, który Beck wskazał na podświetlenie ostrości, które chrome i safari umieściły wokół obszaru tekstowego.
Prawo padding-right kontenera powinno być sumą efektywnego marginesu, obramowania i padding po obu stronach obszaru tekstowego, plus dowolne wypełnienie, które może być potrzebne dla kontenera. Więc, dla przypadku w pytaniu pierwotnym:
textarea{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
.textareacontainer{
padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
<div class="textareacontainer">
<textarea></textarea>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-03 05:13:19
Ten kod działa u mnie z IE8 i Firefoksem
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-22 13:03:25
Możesz skorzystać z właściwości box-sizing, jest ona obsługiwana przez wszystkie główne przeglądarki zgodne ze standardami i IE8+. Jednak nadal będziesz potrzebował obejścia dla IE7. Czytaj więcej tutaj .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-15 10:35:18
Nie, Nie możesz tego zrobić za pomocą CSS. Z tego powodu Microsoft początkowo wprowadził Inny, a może bardziej praktyczny model box . Model pudełkowy, który ostatecznie wygrał, sprawia, że praktyczne jest mieszanie procentów i jednostek.
Myślę, że nie jest w porządku z Tobą wyrażanie szerokości wypełnienia i obramowania w procentach rodzica.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-07 05:26:12
Jeśli padniesz i przesuniesz w ten sposób:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
Prawa strona obszaru textarea idealnie dopasowuje się do prawej strony kontenera, i tekst wewnątrz obszaru textarea idealnie dopasowuje się do tekstu głównego w kontenerze... a lewa strona obszaru tekstowego "wystaje" trochę. czasami jest ładniejsza.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-03 21:56:53
Użyj właściwości rozmiaru pola :
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
To pomoże
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-03 09:30:34
Dla osób, które używają Bootstrap, textarea.form-control może również prowadzić do problemów z rozmiarem textarea. Chrome i Firefox wydają się używać różnych wysokości z następującym Bootstrap CSS:
textarea.form-conrtol{
height:auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-07 15:05:11
A co z ujemnymi marżami?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-14 21:01:10
Często rozwiązuję ten problem calc()
. Po prostu dajesz pole tekstowe o szerokości 100% i pewną ilość wypełnienia, ale musisz odjąć całkowite lewe i prawe Wypełnienie 100% szerokości, które podałeś do pola tekstowego:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
Lub jeśli chcesz nadać textarea obramowanie:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-16 08:25:05
* {
box-sizing: border-box;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
<div class="container">
<div class="row">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your name..">
</div>
<div class="row">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">UK</option>
<option value="canada">USA</option>
<option value="usa">RU</option>
</select>
</div>
<div class="row">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-01 05:47:15