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

时间:2015-01-14 07:02:23

标签: html css input

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

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

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

哪种做法最好在输入[文本]中设置文本对齐?不是textarea而是文字......

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

3 个答案:

答案 0 :(得分:1)

只需使用填充来为输入提供高度

,就可以实现您想要的效果
.bigbox{
    padding: 0 5px 400px
}

小提琴 - http://jsfiddle.net/DjT37/114/

答案 1 :(得分:0)

jsfiddle

我不确定最好,但至少会有效

.bigbox{

    padding:0 5px 400px;
}

答案 2 :(得分:-2)

您总是可以使用容器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