`
wsj123
  • 浏览: 154241 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Input元素去除获取焦点时的边框

    博客分类:
  • html
阅读更多
Input元素去除获取焦点时的边框

1.1概述
        在网页中,用tab键切换时,文字链接、搜索框、按钮等的外面会有一个虚线框(或高亮框),此时当前的元素就获得了焦点,可以对其进行操作。
        注意:这个功能一般是为使用键盘操作的用户准备的,建议一般不要去掉。
        input标签获取焦点的时(如:光标放在input框中准备输入值时), input标签外围会出现边框,如果需要去掉这个边框,可以使用css的outline:none;(当元素获得焦点时焦点框为0)属性。
1.2拓展——CSS outline属性
1、定义
          outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。outline是一个简写属性,在一个声明中设置所有的轮廓属性,即可以按顺序设置outline-color、outline-style、outline-width属性。
注意:
        1》轮廓线不会占据空间,也不一定是矩形。
        2》如果outline不设置outline-color、outline-style、outline-width其中的某个值,也是允许的,比如outline:solid #ff0000;。
        3》请始终在outline-color属性之前声明outline-style属性。因为元素只有获得轮廓以后才能改变其轮廓的颜色。

2、浏览器支持
        所有浏览器都支持 outline 属性。
注意:
        如果规定了 !DOCTYPE,则 IE8 支持 outline 属性。

分享到:
评论

相关推荐

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

    首先,关于`input`和`textarea`的焦点边框,Chrome浏览器会为获得焦点的这些元素添加一个黄色的轮廓(outline),这通常是为了帮助用户识别当前的交互元素。如果想去除这个默认边框,可以通过CSS的`outline`属性来...

    IE6/7下多种方法移除button、input 默认边框和去掉焦点线

    在网页设计中,尤其是在兼容旧版浏览器如IE6和IE7时,经常遇到的一个问题是button和input元素默认的边框以及获取焦点时的焦点线,这些可能会对整体页面的美观性造成影响。以下将详细解释如何在IE6/7下移除这些元素的...

    HTML5 INPUT文本框点击高亮特效.rar

    在这个代码片段中,`:hover`伪类用于在鼠标悬停时改变边框颜色,`:focus`伪类则在输入框获取焦点(即被点击)时应用高亮效果。`transition`属性使得颜色和阴影的变化过程更加自然。 在实际项目中,为了保持代码的...

    CSS拓展案例,包含定位,光标,圆角边框,透明度opacity,边框合并,焦点伪类选择器,属性选择器

    }`可以去除输入框获取焦点时的默认轮廓。 7. **属性选择器(Attribute Selectors)**:这种选择器基于HTML元素的属性来选取元素。例如,`[type="text"]`会选择所有类型为`text`的输入元素,这在编写针对特定属性的...

    清新淡雅的表单效果!兼容IE、FF、OP等浏览器

    可以使用伪类如`:hover`、`:focus`来处理鼠标悬停和获取焦点时的状态。 二、跨浏览器兼容性 1. IE兼容:由于IE对CSS的支持相对有限,需要使用条件注释或针对IE的特定CSS hack,如`_width`、`*width`等。对于某些老...

    button在IE6/7下的黑边去除方案

    在IE6和IE7中,`button`和`input[type="submit"]`元素在获取焦点(如通过键盘tab键切换)后,浏览器会自动添加一个突出显示的边框,通常是黑色。这其实是浏览器为了增强可访问性而设计的一种行为,帮助用户识别当前...

    CSS3 input输入框蓝光特效特效代码

    为了实现蓝光特效,我们可以先设定输入框的基本样式,如边框、填充、圆角等,然后通过`transition`属性来定义当输入框获取焦点(`focus`)时的动画效果。以下是一个简单的示例: ```css /* 设置输入框的基础样式 */ ...

    CSS学生档案表单样式代码.rar

    /* 获得焦点时边框颜色变化 */ outline: none; /* 去除默认轮廓 */ } ``` 在"CSS学生档案表单样式代码"中,可能还会涉及到其他高级特性,如自定义表单控件、响应式设计(适配不同设备)、以及动画效果等。通过这...

    css3 input文本框动画特效特效代码

    使用`background-image`属性和线性渐变(linear-gradient)或径向渐变(radial-gradient),可以在文本框获取焦点时改变其背景颜色,从而创建出动态的效果。 4. **阴影效果(Box Shadow)** `box-shadow`属性能够...

    最常见web前端开发面试题(二)

    - `focus`:元素获取焦点时的样式。 - `first-child`:选择器的第一个子元素。 - `lang`:基于元素lang属性匹配的语言。 兼容性:大部分CSS1和CSS2的伪类在主流浏览器中都有良好支持,但针对某些旧版IE浏览器,...

    用css消除button/selcet等控件选中时的虚线框(让页面美观点)

    此外,代码中还包含了`blr:expression(this.onFocus=this.blur())`,这是一段针对旧版IE浏览器的JavaScript表达式,它的作用是在元素获取焦点时立即失去焦点,以此避免在IE中显示虚线边框。然而,由于现代浏览器已经...

    200多个js小技巧

    1. 文本框焦点问题:在网页设计中,有时我们需要在页面加载后自动将焦点放在特定的输入框上,这可以通过`document.getElementById('inputId').focus()`实现,其中`inputId`是你要获取焦点的输入框的ID。 2. 网页...

    纯css3 ui搜索框样式代码

    3. **伪类选择器**:`:hover`, `:focus`, `:active`等伪类选择器可以实现鼠标悬停、获取焦点和按下状态下的不同样式,增强用户体验。 4. **输入框占位符**:`placeholder`属性可以在输入框内显示提示文字,帮助用户...

    TextBoxJS.

    - 通过设置`hideFocus`属性为`true`,可以在获取焦点时隐藏输入框的边框。 - 示例代码: ```html <input type="text" hideFocus="true"> ``` 3. **只读模式**: - 设置`readOnly`属性使文本框变为只读状态。 ...

    好看的文本框和按钮样式

    "`分别在获取和失去焦点时启动和停止定时器。 ### 知识点七:定时闪烁的文本框边框(大范围) #### 样式代码: ```css #oText {border:1px dotted #ff0000; ryo:expression(onfocus=function light() { with ...

    css3中检验表单的required,focus,valid和invalid样式

    `:focus`伪类则用于选择当前获取焦点的元素。当用户点击或使用键盘导航到特定的表单元素时,我们可以改变其样式以突出显示。例如,可以这样设置聚焦时的边框颜色: ```css input:focus { border-color: blue; ...

    形式

    8. **动画效果**:利用CSS动画,我们可以为表单元素添加过渡效果,比如在提交表单时的加载动画,或者输入框获取焦点时的放大效果,以提升用户体验。 9. **表单重置样式**:为了确保跨浏览器的一致性,有时我们需要...

    JavaScript.txt

    - **解释**:这段代码定义了一个带有图片的链接,通过设置`border`属性为`0`来去除图片周围的边框,并通过`onFocus`事件处理程序调用`this.blur()`方法来避免点击链接时出现虚线框。 ### 17. 表单提交至邮箱 - **...

    JavaScript 经典代码大全

    通过`onFocus`事件处理器并调用`this.blur()`方法,可以在鼠标移入链接时去除图片周围的蓝色边框,这对于提高用户体验非常有帮助。 ### 17. 表单提交至电子邮件 ```html <input type="submit"> ``` 该表单通过`...

    Java初学者基础英语单词表

    97. **onFocus**: 获得焦点事件,元素获得键盘输入时触发。 掌握这些Java基础英语单词,将有助于你更好地理解和编写Java代码。随着学习的深入,你还会遇到更多高级概念和相关词汇,但这些基础知识是学习编程的良好...

Global site tag (gtag.js) - Google Analytics