hi,欢迎访问本站!
当前位置: 首页Web前端正文

textarea禁止拉伸的方法

墨初 Web前端 1029阅读

在前端web页面中,textarea输入框默认是可以通过鼠标拖动来改变其大小的,也就是可以拉伸它的大小。对了textarea可拉伸大小,对于网页的布局来说可能会有一些影响,下面的博文中73博客就说一说如何来禁止textarea拉伸的方法。

css resize属性

在css3中新增加了一个resize属性,此属性可以设置是否可以允许用户通过拖动的方式来自由缩放html元素的尺寸。

reszie:是否允许元素被拖动缩放。

语法:

resize: none|both|horizontal|vertical;

参数:

描述
none用户无法调整元素的尺寸。
both用户可调整元素的高度和宽度。
horizontal用户可调整元素的宽度。
vertical用户可调整元素的高度。

css禁止textarea拉伸的方法

禁止textarea拉伸可以通过CSS中的resize属性来设置。

例:

<style>
    /** https://www.73so.com */
    .m{
        width:150px;
        height: 100px;
        padding: 10px;
    }
    .no{
        resize:none;
    }
</style>
<textarea class="m">我是可以被拖动改变大小的</textarea>
<!-- 下面的输入况是不能被拖动改变大小的 --->
<textarea class="m no">我是不可以被改变大小的</textarea>

以上就是通过CSS中的resize属性来禁止textarea被拉伸的方法,当然除了上面的方法外还可以通过js代码来实现,这里不再多做介绍。


标签:
声明:无特别说明,转载请标明本文来源!
相关推荐