css 将输入中的文本垂直对齐到顶部

Question

在高文本输入中垂直对齐文本的最佳方式是什么？

<input type="text" class="bigbox" value="Some Text"/>

.bigbox{
    height:400px;
    line-height:400px;
    padding:5px;
}

在 input[text] 中设置文本对齐方式的最佳做法是什么？不在文本区域中，而是在文本中...

http://jsfiddle.net/DjT37/111/

Answer 1

您只需使用 padding 给输入一个高度就可以实现您想要的效果

.bigbox{
    padding: 0 5px 400px
}

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

Answer 2

jsfiddle

我不确定最好的，但至少这会起作用

.bigbox{

    padding:0 5px 400px;
}

Answer 3

您总是可以使用容器 div 和一些 javascript（我使用 jQuery）来处理点击。请注意，在 javascript 中删除然后设置输入的 value 是将焦点光标强制到文本的末尾。如果这不是您的要求，请随意使用 .focus()。

HTML

<div class="bigbox">
    <input type="text" class="bigboxinner" value="Some Text"/>
</div>

CSS

.bigbox{
    height:400px;
    line-height:400px;
    padding:0 5px;
    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

css 将输入中的文本垂直对齐到顶部

css align text in input vertically to top

html

css

input