Убираем/изменяем обводку у contenteditable

"Обводка contenteditable". "Убираем/изменяем обводку у contenteditable".

"Обводка contenteditable" не совсем красивая, по крайней мере мне не нравится... вообще и в момент клика... давайте это исправим!

Убираем/изменяем обводку у contenteditable.

1. Изменяем обводку у contenteditable.
2. Убираем обводку у 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>