Teach you step by step how to make a div have the effect of an input box

1. Just add contenteditable or contenteditable="true" to the div (choose one of the two)

<div contenteditable>这是一个input框</div>
<div contenteditable="true">这也是一个input框</div>

2. Set the input style (set according to personal needs)

    <style>
        div {
            width: 200px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #000;
            padding: 5px;
            margin-top: 10px;
        }
    </style>

3. Open the browser to view and you can enter text in the div.

 4. If you need to remove the outer border when the input is focused, you can add the following code to the style.

 /* 去掉input聚焦时候的外边框 */
        [contenteditable]:focus {
            outline: none;
        }