textarea禁止可调节大小及取消默认样式

最新推荐文章于 2024-04-25 12:56:00 发布
最新推荐文章于 2024-04-25 12:56:00 发布
阅读量3.3k 收藏 9
点赞数 4
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50255994/article/details/108991190
版权

textarea在火狐或谷歌浏览器中会有个下三角（IE中没有，不存在此问题），用于方便客户调节文本框大小，但在某些应用功能里并不需要用户调节大小，开发人员只需要在开发时通过css属性resize来实现即可

文本框默认有边框样式（选中也有），解决默认边框使用border属性，解决选中时边框使用outline属性取消默认样式

下面为代码及效果图

CSS代码：

textarea {
  resize: none;
  border: none;
  outline: none
}

可以调整大小的textarea↓

不可调整大小的textarea↓

关闭默认样式的textarea↓

神奇岁岁
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
textarea元素resize开启后， 恢复原样
许失之的笔记
12-11 1217
【CSS3】textarea元素resize开启后恢复原样 问题： 在开发一些表单时发现文本域中存在这样一个问题： 因为表单整个是一直复用的弹窗，提交后只是隐藏了，所以如果textarea在这次编辑中进行了拖拽，再次进入表单时它还是上次拖拽后的高度，有一种数据残留似的感觉。 注：技术栈 —— Vue 解决： resize的机制是计算后实时更新元素style中的height属性值实现的， 这里选择监听元素的显示状态，在textarea不可见的时候偷偷将height改回去： <textarea
使用CSS禁止textarea调整大小功能的方法
09-25
主要介绍了使用CSS禁止textarea调整大小功能的方法,禁止可以调整textarea大小功能的方法很简单,使用CSS的resize属性即可,需要的朋友可以参考下
禁止 textarea 调整大小（缩放）
weixin_44022064的博客
09-24 3786
对 textarea 应用样式 style=”resize:none;” 即可。
HTML文本域如何设置为禁止用户手动拖动
最新发布
ggq53219的博客
04-25 908
要实现这一目标，可以使用CSS的resize属性。
拖拽分栏布局，resize 属性就够了
好川的博客
07-30 1569
CSS resize 属性的应用
CSS3里面的高级属性
dfc16711的博客
07-21 193
-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。 想要禁用这个高亮，设置颜色的alpha值为0即可。 示例 设置高亮色为50%透明的...
textarea标签中resize缩放属性的设置
热门推荐
xinxintai的专栏
12-21 3万+
点击打开链接 CSS3中新增了resize缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css3属性，即Google chrome和Apple safari都支持。 而textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。如下图就是在Google chrome中我博客的textarea
css去除textarea标签的默认样式
总结前端开发中遇到的问题，分享前端知识
11-12 2483
textarea{ border:none; outline: none;/*边线不显示*/ resize: none;/*禁止拉伸*/ background:#05E02E;/*带点绿*/ } 也可以设置width和height属性
将input或textarea设置为disabled的样式问题
weixin_33943836的博客
09-04 707
input:disabled{ -webkit-text-fill-color: #333;//是用来做填充色使用的 -webkit-opacity: 1; color: #333; } textarea:diabled 同样适用 看到有人用这个实现了这个效果 .cont1{ font-size: 40px; -web...
textarea 在浏览器中固定大小和禁止拖动的实现方法
01-19
HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width属性,但是Chrome,Safari和FireFox渲染的效果...
textarea标签大小不可变不能通过鼠标拖动的方式来拖动
09-28
textarea 标签，想必大家都知道吧，那么它的大小如何不可变呢？通过style=resize:none可以解决这个问题
IOS系统 Input或者textarea Disabled默认样式问题
陈大文的博客
12-18 1983
问题：Input或者textarea在设置了disable之后在安卓手机上显示正常，但ios系统手机上就会显示背景为半透明，字体颜色为灰色。 解决方法： input:disabled, textarea:diabled { -webkit-text-fill-color: #000; -webkit-opacity: 1; color: #000; }
取消＜input＞与＜textarea＞默认属性outline和resize
DangR_Jisoo的博客
11-24 1640
取消与默认属性 在我们点击文本框<input>时，文本框默认边框会加黑加粗，影响了视觉效果，我们可以使用outline：none属性来取消默认样式 未设置outline：none属性之前的效果如下图所示： 鼠标未聚焦之前： 鼠标聚焦之后： 很清楚的发现轮廓加粗加黑了，使文本框变得很不美观 但是加了outline：none属性之后，文本框样式与没有聚焦一样 input{ outline: none } 2. 我们在页面写入一个文本域时，文本域的大小可以随意用鼠标拖动来设置大小，一般情
textarea文本域宽度和高度（width、height）自己主动适应变化处理
weixin_30328063的博客
09-19 815
文章来源：http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html <HTML> <HEAD> <TITLE>textarea宽度、高度自己主动适应处理方法</TITLE> <!-- 控制宽度的自己主动适应 --> <style type="text...
css：去除input和textarea默认边框样式并美化
彭世瑜的博客
06-28 3954
同样参考element-ui的css，可以实现如下效果。参考element-ui的css，可以实现如下效果。textarea默认样式和focus样式。input默认样式和focus样式。/* 鼠标hover *//* 鼠标hover *//* 去除默认样式 *//* 去除默认样式 *//* 自定义样式 *//* 自定义样式 *//* 提示文字 *//* 获得焦点 *//* 提示文字 *//* 获得焦点 */
textarea 怎么固定大小，不让调整
weixin_30699741的博客
11-24 1339
1：彻底禁用拖动（推荐） resize:none; 2：只是固定大小，右下角的拖动图标仍在 width:200px; height:100px; max-width:200px; max-height...
如何禁用 HTML 或 CSS 中文本区域的大小调整
因安语未社交平台关闭，博客暂时不受影响，敬请期待下一板块开启！
03-11 194
在这个快速提示中，我们将向您展示 2 种不同的方法来禁用调整 a 的textarea大小，以防您不希望用户能够以这种方式控制它。这是一个相对较快的过程，只需一些使用resizeCSS 属性的简单 CSS。 HTML HTMLtextarea元素默认提供可调整大小的属性。resize: none要禁用它，您可以在元素中使用 CSS 属性textarea。这是一个例子： <textarea ...
去除textarea标签的默认样式
gyueh的博客
11-14 4880
去除文本域的默认样式 textarea{ border:none; outline: none; resize: none; background:red; } outline: none;轮廓线不显示 resize: none;禁止拉伸 若设计稿中文本域有固定宽度，可以设置width和height属性，单位为px 最终效果如图： ...
textarea 设置不能改变大小
qq_42763335的博客
08-01 1万+
 style="resize:none"  //resize属性值：both（表示横向纵向均可拉动）horizontal（表示只有横向可以拉动）vertical（表示只有纵向才可以拉动）none（禁止拉动）  ...
textarea vue 不能调节大小
04-01
文本区域（textarea）本身是可以调节大小的，但是在 Vue 中，如果没有定义相应的样式或者事件，textarea 将不能调节大小。可以使用 CSS 中的 `resize` 属性来控制 textarea 是否可以调节大小，例如： ``` textarea { resize: both; /* 可以在水平和垂直方向上调节大小 */ } ``` 另外，如果需要在 Vue 中实现 textarea 调节大小的功能，可以通过监听鼠标事件来实现。例如： ``` <template> <div> <textarea ref="textarea" @mousedown="startResize" @mouseup="stopResize"></textarea> </div> </template> <script> export default { data() { return { isResizing: false, startX: 0, startY: 0 }; }, methods: { startResize(event) { this.isResizing = true; this.startX = event.clientX; this.startY = event.clientY; }, stopResize() { this.isResizing = false; } }, mounted() { const textarea = this.$refs.textarea; textarea.addEventListener('mousemove', (event) => { if (this.isResizing) { const dx = event.clientX - this.startX; const dy = event.clientY - this.startY; textarea.style.width = `${textarea.offsetWidth + dx}px`; textarea.style.height = `${textarea.offsetHeight + dy}px`; this.startX = event.clientX; this.startY = event.clientY; } }); } }; </script> ``` 这里使用了 `mousedown`、`mouseup` 和 `mousemove` 事件来实现调节大小功能。当用户按下鼠标左键时，设置 `isResizing` 为 true，并记录当前鼠标位置。当用户松开鼠标左键时，设置 `isResizing` 为 false。在 `mousemove` 事件中，如果 `isResizing` 为 true，则计算鼠标位置的变化量，根据变化量调整 textarea 的宽度和高度，并更新记录的鼠标位置。通过这种方式，就可以在 Vue 中实现 textarea 的调节大小功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值