<section class="full">
          <div class="container">
                <div class="row">
                    <div class="form col-sm-8 col-sm-offset-2">
                        <form action="http://meta.discourse.org/new-topic" method="GET" target="_blank">
                            <div class="inputcontainer">
                                <textarea rows="4" placeholder="Ask a question" class="textarea" id="body" name="body"></textarea>
                                <span id="n">255</span>
                            </div>
                          <button type="submit">Ask</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>

@import url('https://fonts.googleapis.com/css?family=Pacifico|Raleway:500');
$mainColor: #1DA1F2;
$secColor: #efefef;
$size: 100%;
$mainFont: 'Raleway', sans-serif;
.full {
    position: fixed;
    top: 0;
    left: 0;
    width: $size;
    height: $size;
    background-color: $mainColor;
    padding: $size - 90% 0;
    font-family: $mainFont;
    transition: all 0.2s linear;
    .form {
        .inputcontainer {
            position: relative;
            textarea.textarea {
                width: $size;
                padding: $size - 95%;
                border: none;
                resize: none;
                border-radius: 10px;
                outline: none;
                color: $mainColor;
                font-size: 50px;
                transition: all 0.5s linear;
                height: 150px;
            }
            span {
                position: absolute;
                bottom: 10px;
                right: 20px;
                font-size: 18px;
                color: $mainColor;
                transition: all 0.2s linear;
            }
        }
    }
}

$(function () {
    'use strict';
    $("#textarea").niceScroll({
        cursorcolor:"#1DA1F2",
        cursorwidth:"5px"
    });
    var n = parseInt($('#n').text());
    $('#textarea').val('');
    $('#textarea').keyup(function (e) {
        var keyLen = $('#textarea').val().length;
        if (keyLen >= 255) {
            e.preventDefault();
            $('.full').css({
                'background-color': 'red'
            });
            $(this).css({
                color: 'red'
            });
            $('#n').css({
                color: 'red'
            });
        } else {
            $('.full').css({
                'background-color': '#1DA1F2'
            });
            $(this).css({
                color: '#1DA1F2'
            });
            $('#n').css({
                color: '#1DA1F2'
            });
        }
        if (keyLen !== 0) {
            $('#n').text(n - keyLen);
        } else {
            $('#n').text('255');
        }
        if (keyLen > 20) {
            $(this).css({
                'font-size': '18px'
            });
        } else {
            $(this).css({
                'font-size': '50px'
            });
        }
    });
});