давайте рассмотрим окончательный вывод, отображаемый для пользователя того, чего мы хотим достичь: заполненное текстовое поле как с рамкой, так и с отступом, характеристики которого заключаются в том, что при щелчке они передают фокус в наше текстовое поле, а Преимущество автоматической 100% ширины, типичной для блочных элементов.
На мой взгляд, лучший подход - по возможности использовать низкоуровневые решения для достижения максимальной поддержки браузерами. В этом случае только HTML может работать нормально, избегая использования Javascript (который, во всяком случае, мы все любим).
Тег LABEL приходит в нашу помощь, потому что имеет такое поведение и может содержать элементы ввода, к которым он должен обращаться. Его стиль по умолчанию - это один из встроенных элементов, поэтому, задав для метки стиль отображения блока, мы можем использовать автоматическую 100% ширину, включая отступы и границы, в то время как внутреннее текстовое поле не имеет границ, без отступов и ширину 100%. .
Взглянув на специфику W3C, мы можем заметить следующие преимущества:
- атрибут «for» не требуется: когда тег LABEL содержит целевой ввод, он автоматически фокусирует дочерний ввод при нажатии;
- если внешняя метка для текстовой области уже была разработана, конфликтов не возникает, поскольку данный вход может иметь одну или несколько меток.
См. особенности W3C для получения более подробной информации.
Простой пример:
.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;
}
<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>
Заполнение и граница элементов .textareaContainer - это те элементы, которые мы хотим передать текстовому полю. Попробуйте отредактировать их, чтобы оформить как хотите. Я дал элементу .textareaContainer большие и видимые отступы и границы, чтобы вы могли видеть их поведение при нажатии.
person
Emanuele Del Grande
schedule
23.03.2010
