css中focus选择器怎么用 | 您所在的位置:网站首页 › 12306学生优惠次数不准 › css中focus选择器怎么用 |
css中focus选择器怎么用
发布时间:2022-03-08 17:11:45
来源:亿速云
阅读:620
作者:小新
栏目:web开发
这篇文章主要为大家展示了“css中focus选择器怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中focus选择器怎么用”这篇文章吧。 css:focus选择器的简单介绍 :focus是css的一个伪类选择器,可以用来选取获得焦点的元素,然后为这些获得焦点的元素设置样式。 只要是可以接收键盘事件或其他用户输入的元素都可以:focus选择器,大多数情况下:focus选择器都是被使用在链接和表单元素上的。 例如:用户单击一个input输入框获取焦点,然后这个input输入框的边框样式就会发生改变,和其他的输入框区别开来,表明已被选中。 一般情况下,浏览器都会自动在表单元素获取焦点时给元素周围添加轮廓,由浏览器添加的样式是每个浏览器的默认样式,并且通常情况下,每个浏览器之间的默认样式看起来是不一样。但为了页面的整体美观和浏览器的样式兼容性,往往我们都需要修改获得焦点时的元素样式,把默认样式替换为我们自己的样式。 这个时候我们就可以使用css:focus选择器来设置浏览器在获得焦点时的的元素默认样式。例: input:focus{ outline:0;/*去除浏览器默认样式*/ border:2pxsolidpink; } 说明:轮廓类似于边框,但它们并不完全相同,我们需要通过outline属性来设置它的样式。例如:设置outline:0;来去除轮廓。 我们还可以把css:focus选择器使用在链接上,例: a:focus{ outline:0; color:red; } 注: 当我们使用css:focus选择器来链接样式时,建议是在:link和:visited选择器设置的样式之后设置:focus样式,否则:focus选择器提供的样式将被:link和:visited选择器提供的样式给覆盖掉。 除了这三个伪类中,:hover和:active伪类也可以用来设置链接样式,它们提供的样式在:focus的样式之后出现。 上面提到的顺序,即:link,visited,focus,hover,active的顺序是首选的,这样可以确保在必要时应用每个伪类的样式,并且不会被另一个伪类的样式覆盖。例: a:link{ color:#0099cc; } a:visited{ color:grey; } a:focus{ background-color:black; color:white; } a:hover{ border-bottom:1pxsolid#0099cc; } a:active{ background-color:#0099cc; color:white; } css:focus选择器的示例: 在聚焦输入和文本区域字段的背景颜色转换为浅黄色突出显示,带有浅红色边框。 html代码:
聚焦这里,textarea文本框 按钮
css代码 .container{ margin:40pxauto; max-width:400px; } input, textarea, button{ padding:.5em; display:block; width:100%; margin-bottom:.5em; } a:link{ color:deepPink; } /*:focusstyles*/ a:focus, input:focus, textarea:focus, button:focus{ /*overridedefaultbrowseroutline*/ outline:0; /*applyotherstyles*/ outline:2pxsolid#F47E58; border-radius:5px; } input:focus, textarea:focus{ background-color:#FFFF66; } 以上是“css中focus选择器怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道! 推荐阅读: focus选择器在css中的作用 css中兄弟选择器怎么用免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 css focus 上一篇新闻:CSS如何实现虚线 下一篇新闻:CSS3如何实现多列 猜你喜欢 C语言怎么对结构体进行赋值 EBS R12怎么对单个报表进行trace Delphi怎么处理JSON格式数据 好程序员web前端培训分享HTML/CSS部分面试题 vue数据丢失的4中情况和解决方法(附视频教程) jQuery面试题有哪些 程序员用1.5小时写出的Java代码,让同事瞠目结舌!直呼优秀 面试JavaScript的题目是怎样的 这些前端开发技术“钱”途大好,你都会了吗? 36个工作中常用的JavaScript函数片段分别是怎样的 |
CopyRight 2018-2019 实验室设备网 版权所有 |