#html #css #textarea
#HTML #css #текстовая область
Вопрос:
В Firefox это работает правильно:
Но в Chrome происходит наложение:
Как это исправить?
FireFox (версия для разработчиков) 83.0b5
Версия Chrome 88.0.4305.3
div{
position: relative;
}
label{
position: absolute;
color: blue;
padding: 1% 2%;
}
textarea{
padding: 25px;
} <div>
<label>some label</label>
<textarea>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</textarea>
</div> Ответ №1:
У Йоханнеса есть решение, если вы хотите, чтобы полоса прокрутки располагалась рядом со всем контейнером. Это не исправление несоответствия заполнения между Chrome / Firefox, а просто другой способ, чтобы вы могли избежать этого.
Сохранение единообразия заполнения и избежание позиционирования методом проб и ошибок.
Примечание: div max-width: 400px и другие max-width / width ы могут быть изменены, если это необходимо, это был выбор стиля, чтобы сделать его отзывчивым.
textarea:focus Это останавливает Chrome от добавления контура в текстовую область — если вам нужны специальные возможности, я бы не стал этого делать или делать это красиво. */
div {
width: 100%;
max-width: 400px;
position: relative;
}
label {
display: block;
color: blue;
background: #fff;
border: 1px solid #000;
width: 100%;
box-sizing: border-box;
padding: 5px 20px 10px 10px;
border-bottom: none;
}
textarea {
display: block;
padding: 0 25px 25px 25px;
width: 100%;
max-width: 100%;
min-width: 100%;
min-height: 200px;
border: 1px solid #000;
border-top: none;
box-sizing: border-box;
position: relative;
top: -1px;
}
textarea:focus {
outline: none;
} <div class="text-area-container">
<label>Some label</label>
<textarea>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</textarea>
</div> Ответ №2:
Как указано в других ответах, это несоответствие Chrome. Однако вот возможный обходной путь, используя белый фон на label (закрывающий текст под ним) и регулируя настройки положения и заполнения (что требует немного проб и ошибок):
div{
position: relative;
}
label{
position: absolute;
color: blue;
padding: 6px 10px 3px;
background: #fff;
width: 190px;
top: 2px;
left: 2px;
}
textarea{
padding: 25px;
padding-top: 30px;
} <div>
<label>some label</label>
<textarea>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</textarea>
</div> Ответ №3:
К сожалению, заполнение в текстовой области является несовместимостью с Firefox и Chrome.
Я мог бы просто обернуть текстовую область в div с рамкой и отступом и поместить туда текстовую область с меткой в верхней части div.
Ответ №4:
Если бы вы могли найти способ определить разницу между Chrome и Firefox, вы могли бы написать альтернативный код, который работает в Chrome. Возможно, сделайте так, чтобы в тексте было несколько пробелов, и добавьте заголовку немного отступов и толстую рамку с тем же цветом фона, что и у остальной части div, чтобы все выглядело так, как будто есть пробел.