Advertisement:
Read Later
In this tutorial, I shall show you how to make whichever HTML element you want on a user interface editable in plain HTML to improve the user experience.
In that regard, you can create user interfaces to collect immaculate details by using any elements feigning form inputs splendidly.
When an HTML element has contenteditable set to true, the document.execCommand() method is made available. This lets you run commands to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using contentEditable, calling execCommand() will affect the currently active editable element.(*)
- Define the container element and the contenteditable attribute as true. It affects all child elements by being inherited.
- Design the user interface using grid layout.
- To optimize the mobile display settings, set the overflow-y parameter as auto.
- To prevent the outline emerging when the container is selected, set the outline parameter as none.
- Design the editable child elements.
------------HTML--------------
<div class="container" contenteditable="true">
<section><p>TEST</p></section>
<section><p>TEST</p></section>
.
.
.
</div>
------------CSS------------
.container{display:grid;grid-auto-rows:100px;grid-template-columns:repeat(auto-fill, 100px);grid-gap:10px;justify-content: center;position:relative;width:100%;height:500px;background-color:#1F2020;overflow-y:auto;padding-top:50px;outline:none;}
.container section{position:relative;background-color:#BA0C2E;cursor:pointer;}
.container section:hover{background-color:#AEE1CD;}
.container section:hover p{color:#1F2020;}
.container p{color:white;font-size:20px;text-align:center;margin-top:35px;}
Result:
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
(*) https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content