在textarea上启用垂直滚动

时间:2011-12-20 19:41:48

标签: html css

我有一个textarea,我想启用垂直滚动。当我超过textarea的高度时,它的大小会增加。滚动条不会出现。我希望出现一个垂直滚动条,用户也无法调整文本区域的大小。

我在网上搜索并尝试过发布的解决方案,但似乎都没有。

演示:http://jsfiddle.net/hozefa/8fv6e/

CSS:

#imageURLId{
font-size: 14px;
font-weight: normal;
resize: none;
overflow-y: scroll;
}

HTML:

<label for="aboutDescription" id="aboutHeading">About</label>
<textarea rows="15" cols="50" id="aboutDescription"
    style="resize: none;"></textarea>
<a  id="imageURLId" target="_blank">Go to
    HomePage</a>

5 个答案:

答案 0 :(得分:17)

试试这个:http://jsfiddle.net/8fv6e/8/

这是答案的另一个版本。

HTML:

<label for="aboutDescription" id="aboutHeading">About</label>
<textarea rows="15" cols="50" id="aboutDescription"
    style="max-height:100px;min-height:100px; resize: none"></textarea>
<a  id="imageURLId" target="_blank">Go to
    HomePage</a>

CSS:

#imageURLId{
font-size: 14px;
font-weight: normal;
resize: none;
overflow-y: scroll;

}

答案 1 :(得分:15)

您可以尝试添加:

#aboutDescription
{
    height: 100px;
    max-height: 100px;  
}

更新:http://jsfiddle.net/8fv6e/3/

答案 2 :(得分:6)

简单地说,改变

<textarea rows="15" cols="50" id="aboutDescription"
style="resize: none;"></textarea>

<textarea rows="15" cols="50" id="aboutDescription"
style="resize: none;" data-role="none"></textarea>

即添加:

data-role="none"

答案 3 :(得分:4)

这是你的CSS

element{
  width: 200px;
  height: 300px;
  overflow-y: auto;
}

答案 4 :(得分:0)

可能是固定的heightoverflow-y: scroll;