Как правильно сделать отступы в textarea в iOS?

Question

[Pitman77]

Проблема заключается в следующем - хотел внизу textarea сделать кнопки с тегами с абсолютным позиционированием, а само поле отодвинуть снизу на 30px. На компьютере в адаптивном режиме работает:



В телефоне нет:



Написано примерно так:

<div class="post_message">
<textarea id="message" name="message"></textarea>
<div class="mobile_toolbar">кнопки</div>
</div>

.post_message {
  position: relative;
}
.post_message textarea {
  display: block;
  width: 100%;
  height: 280px;
  resize: vertical;
  padding: 8px 8px 30px 8px;
  border: 1px solid rgba(17, 17, 17, 0.17);
  border-radius: 4px;
}
.post_message .mobile_toolbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 32px;
  display: block;
  line-height: 32px;
}

Comments

[ⓒⓢⓢ]

в таких случаях я обычно обнуляю все стили textarea
а родителя от textarea уже оформляю стилями

[Pitman77]

JRK_DV, спасибо большое! Сделал. Не подскажите, можно ли при фокусе textarea менять цвет границы родителя?

[ⓒⓢⓢ]

Pitman77, на вскидку, не зная как у вас там что устроенно ...

Вариант 1.
для textarea повесить обработчик события focus\blur и менять класс\стиль родителя в JS

вариант 2.
границы сделать отдельным слоем, рядом с textarea и в стилях использовать такое (псевдокод):

textarea:focus + div.border {
  border-color: red;
}

Answer 1

[Максим Тимофеев]

элементы форм не удобны для стилизации, поэтому подобные вещи верстаются обычными div-ами, а js следит за изменением в них и загоняет в какой-нибудь input type=hidden
В html5 появился великолепный атрибут contenteditable="true".