【CSS】禁止Google浏览器允许定义调整多行文本框

众所周知,多行文本框Textarea是不可以自己随便调整的,如下图,如果要调整,则要写很多的脚本:

这个也好,因为很多情况下,我们不需要开放给用户调整文本框,往往只是需要设置col与row属性,固定其大小就可以的。

可是,谷歌浏览器,对于,一个普通的:

<textarea></textarea>

却是可以如下图,轻易调整的:

这样会拖乱我们页面布局的,有时候调试不知道怎么回事,还以为样式没有写好,

你可以认为这是谷歌浏览器的错,谁叫用户自己没事在乱动这个多行文本框呢?

但是,我们可以做得更完美一点,在后面加上style="resize:none",用户在谷歌浏览器也无法拖动了,如上图的右边文本框。

上面两个图其实就是如下的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>textareaResize</title>
</head>

<body>
<textarea></textarea>
<textarea style="resize:none"></textarea>
</body>
</html>

可以看到style="resize:none"在IE中并没有任何影响的。

时间: 2024-08-29 07:30:47

【CSS】禁止Google浏览器允许定义调整多行文本框的相关文章

【CSS】隐藏多行文本框Textarea在IE中的垂直滚动条

在<[CSS]禁止Google浏览器允许定义调整多行文本框>(点击打开链接)中已经提及过如何使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea在IE中也存在一些样式上的缺陷了. 一个普通的,没有加任何定义的文本框,如下: <textarea cols="30" rows="3"></textarea> 其在IE的效果就如同左侧一样,在没有输入任何文字,就出现垂直滚动条很不雅观,尤其是在

禁止多行文本框textarea拖拽

禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 horizontal 只允许水平方向缩放 vertical 只允许垂直方向缩放

如何利用CSS中的ime-mode用来控制页面上文本框中的全角/半角输入

css 之 ime-mode语法:ime-mode : auto | active | inactive | disabled取值:auto : 默认值.不影响ime的状态.与不指定 ime-mode 属性时相同active : 指定所有使用ime输入的字符.即激活本地语言输入法.用户仍可以撤销激活imeinactive : 指定所有不使用ime输入的字符.即激活非本地语言.用户仍可以撤销激活imedisabled : 完全禁用ime.对于有焦点的控件(如输入框),用户不可以激活ime 说明:设

使用 CSS 去掉 iPhone 网页上按钮的超大圆角以及文本框圆角默认样式

使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角且颜色由上而下渐变的样式,显得超级恶心,而且文本框也会有一定的圆角,但是我们自己定义 border-radius 也没有效果,经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式.此时的解决办法为: input[type=submit],input[type=reset],input[type=button],input[type=text]{-webkit-appe

jQ禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突

1. 禁止右键点击 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 代码如下: $(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($

css禁止用户选择文本(兼容所有浏览器)

css禁止用户选择文本(兼容所有浏览器) 如果让整个页面都禁止选择,可以使用下面的css body{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 如果希望指定元素禁止访问,请看下面的示例代码: <!doctype html> <html

[转]CSS禁止选择文本功能

有时候,我们为了用户体验,需要禁用选择文本功能.这需要用到一个CSS属性:user-select,user-select的文档点这里 user-select有两个值:none:用户不能选择文本text:用户可以选择文本 需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整 body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-

[译] 如何调试CSS的跨浏览器样式bug

http://www.cnblogs.com/newyorker/archive/2013/01/22/2870682.html 原文 http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/ 作者为YAHOO前端工程师. 首先要做的是挑选一个好的浏览器.我的选择是Chrome,因为它拥有强大的调试工具.当我在Chrome上完成调试后,我会接着在Safari或者Firefox上调试. 如果在这些“好的”

前端开发入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡×××输入框代替了背景样式,看起来有些怪异. ?那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的×××背景:如: input:-webkit-autofill { -webkit-box-shadow: 0 0