JSFiddle - React, Tailwind, and code Playground

by seangaffney

HTML

<script src="http://github.com/seangaffney/inputScroll/raw/master/inputScroll.js"></script>
<form action="index_submit" method="get" accept-charset="utf-8" id="getmonies">
    <label for="dollars">Pay Me Lots of Dollars</label>
    <div class="scrollContainer">
        <input type="text" name="dollars" value="$50" id="dollars" class="scrollMe">
    </div>
    <input type="submit" value="Submit" id='submit'>
</form>

CSS

* {
    font-family: helvetica, arial, sans-serif;
    font-size: 13px;  
}

form {
    position: relative;
}

.scrollMe {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 50px;
    text-align: center;
    line-height: 30px;
    border: 0;
    background: transparent;
}

.scrollContainer {
    position: absolute;
    top: 0;
    background: #fff;
    height: 30px;
    width: 50px;
    border: 1px solid #4d4d4d;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: inset 0 0 10px #aaa;
    overflow: hidden;
}

.more, .less  {
    position: absolute;
    left: 65px;
    top: 0;
}

.less {
    top: 20px;
}

.theAmount {
    position: absolute;
    display: block;
    
}

#submit {
    position: absolute;
    left: 115px;
    padding: 5px 0;
    width: 100px;
    font-weight: bold;
    text-align: center;
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer;
}

JavaScript

$theForm = $('#getmonies');

$theForm.find('label').hide();

$theForm.append('<a class="more" href="#">more</a><a href="#" class="less">less</a>');

$('a.more').click(function(e) {
    $('.scrollMe').inputScroll('up');
    e.preventDefault();
});

$('a.less').click(function(e) {
    $('.scrollMe').inputScroll('down');
    e.preventDefault();
});