Terminal retrofuturistic

making the cursor cool again

by SebastianPataneMasuelli

HTML

<input type="text" value="test">

CSS

body {
    background-color: #333;
}

input {
    float: left;
    padding: 5pt;
    color: white;
    background-color: transparent;
    border-color: white;
    border-style: solid;
    border-width: 2px 0 2px 2px;
    outline: none;
    width: auto;
    -webkit-transition: all .25s;
}


input.active {
    border-color: white;
    border-width: 2px 0 2px 2px;
    
    
    width: 100%;
    }

JavaScript

//on('keypress', 'input', function () {
//    alert('woot');
//});

$('input').keydown(function () {
    $(this).addClass('active');
});
    
$('input').keyup(function () {
   $(this).removeClass('active');
});