<byondclass name="chatbox">

<style>
#chatbox {
    width: 200px;
    height: 150px;

    position: absolute;
    top: calc(100% - 150px);
    margin: 0px 0px 50px 50px;

    background: rgba(0,0,0,0);

    z-index: 1;
}

#content {
    width: 100%;
}

input[type="text"] { // <-------- Pay attention to this line
    width: 100%;
    height: 25px;

    margin: auto;
    border: 1px solid grey;
    color: rgb(61, 132, 252);
    background-color: rgb(0, 52, 141);
}

.chat-strip {
    width: 100%;

}
</style>

<script>
(function() {
    var stripColors = ['rgba(20, 107, 255, 0.5)', 'rgba(0, 68, 184, 0.5)'];
    var curStrip = 0;

    return {
        fn: {
            output: function(obj) {
                if(obj.hasOwnProperty('text')) {
                    this.ui.content.innerHTML += '<div class="chat-strip" style="background-color:' + stripColors[curStrip] + ';">' + obj.text + '</div>';
                    if(curStrip < stripColors.length - 1) {
                        curStrip++;
                    } else {
                        curStrip = 0;
                    }
                }
            }
        }
    };
})()
</script>

<div id="content"></div>
<input id="chat-input" type="text" placeholder="Press enter to chat..." onsubmit="javascript:output(this);return false;" />

</byondclass>