`

去掉谷歌浏览器默认的input、textarea的边框

 
阅读更多

1、使用Chrome的都知道,当鼠标焦点在inputtextarea这些元素上时,Chrome默认的会给它们加上黄色的边框,我以前一直以为这是chrome的特性,没法去掉,原来是css的效果,outline这个属性。
你可以用下面的css代码去掉所有元素的边框:

*:focus {outline: none;}

用下面的代码去掉你要去掉的元素的边框:

.nohighlight:focus
{
outline:none;
}

你也可以给元素增加你希望的边框:

.changeborder:focus
{
outline:Blue Solid 4px;
}

2、用chrome登录了一次并记录了COOKIES之后,再次打开,CHROME记录了上次输入的内容,背景图片就会被覆盖一层淡黄色的背景色,点击一下鼠标,背景图片才显示出来。这个怎么解决呢?我当时碰到这个问题的时候,也很头疼,至今都没有发现有什么好的办法。有发现的请分享一下。
3、chrome默认用户可以控制textarea的大小,在CSS中加入下面一句就可以了

textarea {resize:none;}
分享到:
评论

相关推荐

    去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景

    本文主要关注的是如何在谷歌浏览器(Chrome)中处理`input`和`textarea`元素的焦点状态,包括移除默认边框、背景以及禁用文本区域的大小调整功能。 首先,关于`input`和`textarea`的焦点边框,Chrome浏览器会为获得...

    JavaScript获取,设置光标位置,兼容InputTextArea

    在JavaScript编程中,获取和设置光标位置是常见的需求,特别是在与用户交互的表单元素如`<input>`和`<textarea>`中。这涉及到DOM(文档对象模型)操作和事件处理,对于创建动态和响应式的网页应用至关重要。本文将...

    flex解决textarea,input不能输入中文的方法

    ### flex解决textarea,input不能输入中文的方法 在使用Flex进行Web应用开发时,有时会遇到一个让人头疼的问题:在非主应用程序环境下(例如嵌入到HTML页面中的SWF文件),textarea和input控件无法正常输入中文字符...

    textarea 输入框自适应高度

    2. **事件监听**:监听textarea的`input`或`change`事件,这些事件会在用户输入或删除文本时触发。当事件发生时,执行调整高度的函数。 3. **计算高度**:在事件处理函数中,获取textarea的当前值,然后利用`...

    在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法

    在Chrome浏览器中,当用户聚焦到`input[type="text"]`输入框或`textarea`多行文本框时,浏览器会自动添加一个黄色的边框来提示用户当前元素处于焦点状态。然而,在某些情况下,这种默认的黄色边框可能与网页的设计...

    textarea框增加行号效果

    1. 当页面加载完成时,监听 `textarea` 的 `input` 事件,这意味着每当用户在 `textarea` 中输入或删除内容时,`updateLineNumbers` 函数会被调用。 2. `updateLineNumbers` 函数将 `textarea` 中的文本分割成多行,...

    Vue下textarea文本框根据内容自适应改变高度

    然而,IE浏览器有一个已知问题,即在某些情况下,`scrollHeight`属性可能不会正确反映textarea的高度。为了解决这个问题,我们需要添加一些兼容性处理。一种可能的解决方案是使用CSS的`resize`属性,将其设置为`none...

    CSS样式去除input和textarea点击选中框

    针对网页设计中经常使用的input和textarea元素,它们在用户交互过程中,尤其是被点击时,会显示一个蓝色或灰色的选中框(也被称为聚焦边框),这个视觉效果可能会对页面整体的美观造成干扰。为了消除这种影响,设计...

    react-input-textarea:设置 React 输入和文本区域的样式,直到占位符。 将它们设置为内联样式,无需任何外部 CSS。 (已停产)

    var Input = require ( 'react-input-textarea' ) . Input ; var TextArea = require ( 'react-input-textarea' ) . TextArea ; var MyComponent = React . createClass ( { render : function ( ) { return ( ...

    textarea自适应高度标签,去除难看的滚动条

    然而,`textarea` 的默认行为可能导致一些视觉上的问题,比如固定的高度可能会限制用户输入,而滚动条则可能破坏页面的整体美感。针对这些问题,我们可以采用特定的技术来实现 `textarea` 的高度自适应和去除滚动条...

    textarea滚轮默认位置

    textarea滚轮默认位置

    textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法

    然而,当`textarea`内的文本超出了其可视区域时,浏览器会自动添加滚动条以便浏览全部内容。在某些情况下,我们可能希望去除这些滚动条,以保持界面的简洁或者统一设计风格。本文将详细介绍如何在HTML和JavaScript中...

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

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

    Vue指令你可以很方便地对页面中所有input和textarea的自动聚焦行为进行流程控制

    标题提到的“Vue指令”特别关注了对`input`和`textarea`元素的自动聚焦(autofocus)行为的流程控制。 Vue中的自定义指令(Custom Directives)允许开发者定义自己的DOM操作逻辑,比如当一个元素被插入到DOM时、...

    jquery复制到剪贴板(input,textarea)

    2. **创建复制按钮**:为要复制的元素(如input、textarea等)添加一个复制按钮,可以是链接或按钮。 ```html <input type="text" id="myInput" value="要复制的文本"> 复制 ``` 3. **使用jQuery绑定事件**:在...

    textarea,textbox高亮关键字

    最近开发的时候做了textarea 高亮关键字,尝试过很多方法,比如用iframe,和编辑器替换,当然这也是一个方法,但是原来是用textbox的内容要达到兼容这两种方法是做不到的,所以这里是使用jquery插件和jquery核心文件搞的...

    textarea_文本框多行下划线输入框.html

    html页面实现给textarea等等的文本框内添加可动态输入文字的多行下划线,类似于打印出来的学生考试试卷答题的那种多行横线效果一样,可在页面文本框内横线输入框上随意输入文字,调用浏览器打印文本时也可完整正常的...

Global site tag (gtag.js) - Google Analytics