Pure CSS auto height chat input box

index.html

<div contenteditable class="magic-input" tab-index="1" data-placeholder="Write a message..." ></div>

pure-css-auto-height-chat-input-box.markdown

Pure CSS auto height chat input box

A Pen by Negar on CodePen.

License.

script.js

// These lines are just for add/remove placeholer native like
function updateInput(element){
    if(element.innerText && element.getAttribute('data-placeholder')){
        element.setAttribute('data-placeholder-backup', element.getAttribute('data-placeholder'))
        element.removeAttribute('data-placeholder');
    }
    if(!element.innerText && element.getAttribute('data-placeholder-backup')){
        element.setAttribute('data-placeholder', element.getAttribute('data-placeholder-backup'))
        element.removeAttribute('data-placeholder-backup');
    }
}

style.scss

:root{
    --max-input-height: 20vh;
}
.magic-input{
    max-height: var(--max-input-height);
    overflow: hidden scroll;        
}


// Make pen beauty
body{
    background-color: #18191d;
    color: #f5f5f5;
}
.magic-input{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    outline: 0;
    background-color: #282e33;    
    padding: 15px;
    line-height: 1.4em;
    
    &, &:before{
        color: #818991;
    }
    &:before{
        content: attr(data-placeholder);
    }
    
    &:focus{
        color: #fff;
        &:before{
            visibility: hidden;
        }
    }
}