`
luolonghao
  • 浏览: 119128 次
  • 性别: Icon_minigender_1
  • 来自: Shanghai
社区版块
存档分类
最新评论

Webkit的textarea输入框

阅读更多
大家都知道,Webkit系列浏览器(Safari、Chrome)的textarea的默认效果和其它浏览器不一样,比如,textarea可拖动调整大小,聚焦(onfocus)时边框变成黄色。这些效果的确很酷,但我们有时候不需要这些效果,那怎么办呢?其实用CSS轻松取消这些效果。

1. 取消拖动调整大小
textarea {
    resize: none;
}


2. 聚焦时边框颜色不变
textarea:focus {
    outline: none;
}
1
3
分享到:
评论

相关推荐

    css解决Webkit 核心文本输入框的高亮

    在网页设计与开发的过程中,经常会遇到浏览器默认样式带来的各种显示问题,其中之一就是Webkit核心文本输入框获得焦点时出现的高亮边框问题。这个问题在不同的浏览器和操作系统中表现不一,但通常会影响到网站的整体...

    固定textarea文本域尺寸

    默认情况下,Chrome 和其他基于 WebKit 的浏览器允许用户通过拖动textarea的角落来调整其大小,这在某些场景下是实用的,但并不总是符合设计师对页面布局的预期。有时,保持页面的统一性和美观性更为重要,因此需要...

    修改输入框placeholder文字默认颜色-webkit-input-placeholder方法

    textarea::-webkit-input-placeholder { color: #999999; } ``` 上述代码中,`#999999` 是我们想要设置的新颜色,你可以根据自己的需求更改这个值。为了确保在所有支持`placeholder`属性的浏览器中都能正常工作,...

    vue + el-input 中 textarea 实现 placeholder 换行

    然后,在`style`标签中,我们使用`::v-deep`选择器(或`>>>`)定位到`el-input__inner`内部的`textarea`,并通过`::-webkit-input-placeholder`伪元素来改变`placeholder`的样式。`white-space: pre-wrap`允许空白...

    常用的HTML+CSS标签480个(带中文解释说明)

    textarea 输入框 onmouseover ="changebackground1(this.id)" /*设置经过点击离开点击后的背景颜色*/ onmouseout ="changebackground2(this.id)" onmousedown ="changebackground3(this.id)" onmouseup ="change...

    JS中解决谷歌浏览器记住密码输入框颜色改变功能

    具体来说,`input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill` 会触发特定的CSS样式,比如背景色变为 `rgb(250,255,189)`,字体颜色变为黑色。 如果开发者希望在用户记住密码之后,...

    div实现自适应高度的textarea实现angular双向绑定

    在开发Web应用时,我们经常需要处理用户输入的文本,特别是在聊天、评论等场景中,一个自适应高度的输入框可以提供更好的用户体验。在Angular框架中,通常使用`<textarea>`元素来实现这样的功能,但有时`<textarea>`...

    vue实现页面内容禁止选中功能,仅输入框和文本域可选

    在Web开发中,有时候为了提升用户体验或保护网页内容不被非法复制,我们需要实现页面内容禁止选中的功能,但又希望某些元素如输入框(input)和文本域(textarea)能保持可选择性。本篇将介绍如何使用Vue框架结合CSS和...

    使用CSS3的appearance属性改变元素的外观的方法

    - `textarea`:呈现为多行文本输入框。 - `menulist`:呈现为下拉菜单。 例如,要将一个段落元素渲染成一个下拉菜单,可以这样写: ```css .pseudoMenu { -webkit-appearance: menulist; -moz-appearance: ...

    CSS3提交意见输入框样式代码

    `-webkit-`和`-moz-`前缀是针对旧版Webkit(如Safari和Chrome)和Firefox浏览器的兼容性写法。 3. **聚焦状态(Focus State)**: 当用户聚焦于输入框时,使用`focus`伪类改变其样式。这里使用了`box-shadow`属性...

    css自定义占位文本(placeholder)的样式的方法示例

    在网页设计中,为了给用户提供更好的交互体验,我们经常会在输入框(input)或文本区域(textarea)中设置占位文本(placeholder),它是一种提示性文字,帮助用户了解应该输入什么样的内容。然而,有时我们可能希望自定义...

    CSS Reset 样式重置的实现示例.pdf

    body, p, h1, h2, h3, h4, h5, h6, dl, dd, ul, ol, th, td, button, figure, input, textarea, form, pre, blockquote, figure { margin: 0; padding: 0; } /* 链接相关 */ a { cursor: pointer; text-...

    移动端开发资料1

    至于表单输入框`placeholder`的颜色,可以使用Webkit特定的选择器来改变: ```css input::-webkit-input-placeholder { color: #AAAAAA; } input:focus::-webkit-input-placeholder { color: #EEEEEE; } ``` ...

    HTML5制作的桌面提醒

    - `<textarea id="msgs"></textarea>`:用户输入提醒内容。 - `显示" id="tip">`:点击后触发提醒显示。 2. **CSS样式**:设置输入框和按钮的基本样式。 - `#msgs`:设置文本输入框的样式。 - `#tip`:设置按钮...

    html5+CSS 实现禁止IOS长按复制粘贴功能

    这段代码将恢复`input`和`textarea`的正常行为,使得用户依然可以在输入框中输入和编辑文本。同时,`margin: 0px;`和`padding: 0px;`是用来清除默认的外边距和内边距,而`outline: none;`则是移除焦点时的边框高亮。...

    编辑器 KindEditor 4.0.4

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript ...

    chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: #FFFFFF !important; background-image: none !important; color: #333 !important; } ``` 然而,需要注意的...

    css小技巧汇总

    input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; } //其中#fff是背景颜色值 2、IE8不支持opacity:0属性,可以加上下面属性: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)...

    纯CSS实现漂亮的提交表单

    - `input` 和 `textarea` 标签的样式为输入框添加了内边距、边框、边框颜色、阴影效果等,增强了输入框的视觉表现。 - 使用渐变背景和阴影效果增强了元素的立体感,并通过伪类`:hover`和`:focus`改善了用户的交互...

Global site tag (gtag.js) - Google Analytics