SO 29636578

make-text-area-like-notepad-javafx

by Sainath Vaidhyanath

HTML

<div id="container">
    <textarea name="">Have some text here. Blah. blah. blah</textarea>
</div>

CSS

#container {
    margin:0;
    padding:0;
}
textarea {
    margin:0;
    padding: 0 4px;
    height: 150px;
    width:300px;
    position: relative;
    color: #444;
    line-height: 20px;
    border: 1px solid #d2d2d2;
    background: #fff;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#3b84aa), color-stop(4%, #f2e47c)) 0 0px
    /*4px*/
    ;
    background: -webkit-linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
    /*4px*/
    ;
    background: -moz-linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
    /*4px*/
    ;
    background: -ms-linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
    /*4px*/
    ;
    background: -o-linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
    /*4px*/
    ;
    background: linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
    /*4px*/
    ;
    -webkit-background-size: 100% 20px;
    -moz-background-size: 100% 20px;
    -ms-background-size: 100% 20px;
    -o-background-size: 100% 20px;
    background-size: 100% 20px;
    box-shadow: 2px 2px 10px #3391fc;
}