Css Align Text In Input Vertically To Top

Which is the best way to vertical align of text in tall text input? .bigbox{ height:400px; line-height:400px;

Solution 1:

jsfiddle

I am not sure about the best but at least this will work

.bigbox{

    padding:05px400px;
}

Solution 2:

You can achieve what you want by only using padding to give your input a height

.bigbox{
    padding: 05px400px
}

Fiddle - http://jsfiddle.net/DjT37/114/

Solution 3:

You could always fake it using a container div and some javascript (i used jQuery) to handle clicking. Note that the removal and then setting of the input's value in the javascript is to force the focus cursor to the end of the text. Feel free to just use .focus() if this isnt a requirement for you.

HTML

<divclass="bigbox"><inputtype="text"class="bigboxinner"value="Some Text"/></div>

CSS

.bigbox{
    height:400px;
    line-height:400px;
    padding:05px;
    font-size:16px;
    border:1px solid #CCC;
    display:inline-block;
    cursor:text;
}
.bigboxinner{
    border:none;
    vertical-align:top;
    outline:none;
}

JS

$(function(){
    $('.bigbox').on('click', function(){
        var inner = $(this).find('input.bigboxinner');
        var tempval = inner.val();
        inner.val('').focus().val(tempval);
    });
});

JSFIDDLE DEMO