{"id":4707,"date":"2021-07-28T04:39:15","date_gmt":"2021-07-28T04:39:15","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=4707"},"modified":"2021-07-28T04:45:55","modified_gmt":"2021-07-28T04:45:55","slug":"write-a-placeholder-for-contenteditable-div-or-span-tag-with-css","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/","title":{"rendered":"Write a placeholder for contenteditable div or span tag with CSS"},"content":{"rendered":"

Problem:-<\/strong> Suppose, we have a contenteditable div or span tag on a web page, and it is generally pre-filled with some text. But, when I remove the content from editable span or div, then it becomes blank and the blank area on the web page makes the page a little bit weird and maybe the person doesn\u2019t know that it can be writable.<\/p>\n

Solution with CSS:-<\/h2>\n

For example, we have the following HTML sample:
\n<!DOCTYPE html>
\n<html>
\n<head>
\n<title>Page Title<\/title>
\n<style>
\nspan, div {
\nmargin: 10px;
\nborder: 1px solid #ddd;
\n}
\n<\/style>
\n<\/head>
\n<body>
\n<h1>Editable Span and Div<\/h1>
\n<span contenteditable=\"true\">Hi span<\/span>
\n<div contenteditable=\"true\">Hi Div<\/div>
\n<\/body>
\n<\/html><\/code><\/p>\n

The output of the above HTML is as follows:
\n\"CSS\"\/
\nNow, suppose, I have removed the text from both the span and div and I start doing something on the web page. After removing the text from both span and div, it doesn\u2019t look so good on a webpage<\/a> as shown below:
\n\"span1\"\/
\nSo, here\u2019s a very simple CSS solution to add a placeholder whenever someone removes the whole text from span or div.
\nspan[contenteditable]:empty:focus::before,
\nspan[contenteditable]:empty::before{
\n content: 'Write something in span';
\n}
\ndiv[contenteditable]:empty:focus::before, div[contenteditable]:empty::before {
\n content: 'Write something in div';
\n}<\/code><\/p>\n

And whenever any user removes the whole content with backspace key from span <\/strong>and div<\/strong>, the span <\/strong>and div <\/strong>tags are filled with their respective placeholders and the output will be as shown below:
\n\"span2\"<\/p>\n

Study Section provides a big list of certification exams through its online platform. The French Certification Exam<\/a> can help you to certify your skills to communicate in the French language. Whether you are new to the language or you are an expert in it, this French certification exam can test the ability of anybody\u2019s command over the French language.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

Problem:- Suppose, we have a contenteditable div or span tag on a web page, and it is generally pre-filled with<\/p>\n","protected":false},"author":1,"featured_media":4712,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[283,685],"acf":[],"yoast_head":"\nWrite a placeholder for contenteditable div or span tag with CSS - SS blog<\/title>\n<meta name=\"description\" content=\"So, here\u2019s a very simple CSS solution to add a placeholder whenever someone removes the whole text from span or div on a webpage.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Write a placeholder for contenteditable div or span tag with CSS - SS blog\" \/>\n<meta property=\"og:description\" content=\"So, here\u2019s a very simple CSS solution to add a placeholder whenever someone removes the whole text from span or div on a webpage.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-28T04:39:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-28T04:45:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/07\/placeholder.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Write a placeholder for contenteditable div or span tag with CSS\",\"datePublished\":\"2021-07-28T04:39:15+00:00\",\"dateModified\":\"2021-07-28T04:45:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/\"},\"wordCount\":256,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"CSS\",\"Placeholder\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/\",\"url\":\"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/\",\"name\":\"Write a placeholder for contenteditable div or span tag with CSS - SS blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2021-07-28T04:39:15+00:00\",\"dateModified\":\"2021-07-28T04:45:55+00:00\",\"description\":\"So, here\u2019s a very simple CSS solution to add a placeholder whenever someone removes the whole text from span or div on a webpage.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Write a placeholder for contenteditable div or span tag with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Write a placeholder for contenteditable div or span tag with CSS - SS blog","description":"So, here\u2019s a very simple CSS solution to add a placeholder whenever someone removes the whole text from span or div on a webpage.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/","og_locale":"en_US","og_type":"article","og_title":"Write a placeholder for contenteditable div or span tag with CSS - SS blog","og_description":"So, here\u2019s a very simple CSS solution to add a placeholder whenever someone removes the whole text from span or div on a webpage.","og_url":"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2021-07-28T04:39:15+00:00","article_modified_time":"2021-07-28T04:45:55+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/07\/placeholder.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Write a placeholder for contenteditable div or span tag with CSS","datePublished":"2021-07-28T04:39:15+00:00","dateModified":"2021-07-28T04:45:55+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/"},"wordCount":256,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["CSS","Placeholder"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/","url":"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/","name":"Write a placeholder for contenteditable div or span tag with CSS - SS blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2021-07-28T04:39:15+00:00","dateModified":"2021-07-28T04:45:55+00:00","description":"So, here\u2019s a very simple CSS solution to add a placeholder whenever someone removes the whole text from span or div on a webpage.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/write-a-placeholder-for-contenteditable-div-or-span-tag-with-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Write a placeholder for contenteditable div or span tag with CSS"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":4114,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4707"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=4707"}],"version-history":[{"count":4,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4707\/revisions"}],"predecessor-version":[{"id":4715,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4707\/revisions\/4715"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/4712"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=4707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=4707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=4707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}