Убираем/изменяем обводку у contenteditable
"Обводка contenteditable". "Убираем/изменяем обводку у contenteditable".
"Обводка contenteditable" не совсем красивая, по крайней мере мне не нравится... вообще и в момент клика... давайте это исправим!
Убираем/изменяем обводку у contenteditable.
Изменяем обводку у contenteditable.
Изначально у "contenteditable" обводки вообще нет...
Делаем обводку у contenteditable.
Для того, чтобы сделать обводку у contenteditable вам потребуется...
Используем тег div.
Внутрь помещаем contenteditable.
Теперь нарисуем обводку... для contenteditable.
Чтобы обратиться к блоку через css вам потребуется класс... не будем придумывать какие-то названия... возьмем это эже слово "contenteditable".
Добавляем бордюр.
Подбираем цвет обводки contenteditable... ели не знаете как, то у меня есть генератор.
+ Внутренний отступ.
+ Наружный отступ Margin.
Добавим placeholder для contenteditable.
Пример добавленной обводки у contenteditable.
Теперь... соберем весь код вместе... и поместим его пярмо здесь:
Код добавленной обводки у contenteditable.
Html :
<div class=contenteditable contenteditable=true data-placeholder="Нажми на меня!"></div>
Css :
<style>
.contenteditable {
border: 1px solid #d7d7d7;
padding: 20px;
margin: 10px;
}
[contenteditable]:empty:before {
content: attr(data-placeholder);
color: grey;
display: inline-block;
}
</style>
Убираем обводку у contenteditable при клике
Выше пунктом, если вы видели пример.., то при клике на теге с contenteditable у него появляется не совсем симпатичная, а вернее сказать, что совсем не симпатичная! Давайте исправим это! Для этого вам понадобится...
Берем теорию из выше приведенного пункта...
И добавляем, вернее убираем обводку при клике у contenteditable - см. теорию!
Пример убранной обводки у contenteditable.
Код убранной обводки у contenteditable.
Html :
<div class=contenteditable_2 contenteditable=true data-placeholder="Нажми на меня!"></div>
Css :
<style>
.contenteditable_2 {
border: 1px solid #d7d7d7;
padding: 20px;
margin: 10px;
outline:none;
}
[contenteditable]:empty:before {
content: attr(data-placeholder);
color: grey;
display: inline-block;
}
</style>
Этим вы очень поможете проекту! Заранее огромное спасибо!
