神奇的选择器 :focus-within上海时时乐走势图官网

伪类选择器 :focus-within

言归正传,今天要说的就是:focus-within 伪类选择器。

它表示一个元素获得焦点,或,该元素的后代元素获得焦点。划重点,它或它的后代获得焦点。

这也就意味着,它或它的后代获得焦点,都可以触发 :focus-within

1、:enabled选择器

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

上海时时乐走势图官网 1 上海时时乐走势图官网 2

3 赞 3 收藏 评论

  display: inline-block;

配合 :placeholder-shown 伪类实现表单效果

:focus-within 一个人能力有限,通常也会配合其他伪类实现一些不错的效果。这里要再简单介绍的是另外一个有意思的伪类 :placeholder-shown

:placeholder-shown:The :placeholder-shown CSS pseudo-class represents any or <textarea> element that is currently displaying placeholder text.

另外,划重点,这个伪类是仍处于实验室的方案。也就是未纳入标准,当然我们的目的是探寻有意思的 CSS 。

意思大概就是,当 input 类型标签使用了 placeholder 属性有了默认占位的文字,会触发此伪类样式。配合:not()伪类,可以再改变当默认文字消失后的样式,再配合本文的主角,我们可以实现表单的一系列效果。

CSS 代码大概呈现成这样:

CSS

.g-container { width: 500px; height: 60px; input { height: 100%; width: 100%; &:not(:placeholder-shown) { ... } &:placeholder-shown { ... } } &:focus-within { ... } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.g-container {
    width: 500px;
    height: 60px;
    input {
        height: 100%;
        width: 100%;
        &:not(:placeholder-shown) {
            ...
        }
        &:placeholder-shown {
            ...
        }
    }
    &:focus-within {
        ...
    }
}

实际效果如下:

上海时时乐走势图官网 3

可以看到,上面的效果没有用到任何 JS,可以实现:

  1. 整个 input(包括父元素所在区域)获焦与非获焦样式控制
  2. placeholder 属性设置的文字出现与消失后样式控制

CodePen Demo — :placeholder-shown && :focus-within

 

}

TAB导航切换

在之前的一篇文章里,介绍了两种纯 CSS 实现的 TAB 导航栏切换方法:

纯CSS的导航栏Tab切换方案

现在又多了一种方式,利用了 :focus-within 可以在父节点获取元素获得焦点的特性,实现的TAB导航切换:

上海时时乐走势图官网 4

DEMO — focus-within switch tab

主要的思路就是通过获焦态来控制其他选择器,以及最重要的是利用了父级的 :not(:focus-within) 来设置默认样式:

CSS

.nav-box:not(:focus-within) { // 默认样式 } .nav-A:focus-within ~ .content-box .content-A { display: block; } .nav-B:focus-within ~ .content-box .content-B { display: block; }

1
2
3
4
5
6
7
8
9
10
11
.nav-box:not(:focus-within) {
    // 默认样式
}
.nav-A:focus-within ~ .content-box .content-A {
    display: block;
}
.nav-B:focus-within ~ .content-box .content-B {
    display: block;
}

}

神奇的选择器 :focus-within

2018/08/03 · CSS · CSS

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能。

伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持下面这两种表示方式。

通常而言,

CSS

#id:after{ ... } #id::after{ ... }

1
2
3
4
5
6
7
#id:after{
...
}
#id::after{
...
}

符合标准而言,单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素。

当然,也有例外,对于 CSS2 中已经有的伪元素,例如 :before,单冒号和双冒号的写法 ::before 作用是一样的。

所以,如果你的网站只需要兼容 webkit、firefox、opera 等浏览器或者是移动端页面,建议对于伪元素采用双冒号的写法,如果不得不兼容低版本 IE 浏览器,还是用 CSS2 的单冒号写法比较安全。

 

    <div class="box">

实现离屏导航

这个是其他很多文章都有提到过的一个功能,利用 focus-within 便捷的实现离屏导航,可以说将这个属性的功能发挥的淋漓尽致,这里我直接贴一个 codepen 上 Dannie Vinther 对这个效果的实现方案:

上海时时乐走势图官网 5

CodePen Demo — Off-screen nav with :focus-within [PURE CSS]

 

HTML代码:

关于作者:chokcoco

上海时时乐走势图官网 6

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

上海时时乐走势图官网 7

input[type="text"]:-moz-read-only{

:focus-within 的冒泡性

这个属性有点类似 Javascript 的事件冒泡,从可获焦元素开始一直冒泡到根元素 html,都可以接收触发 :focus-within 事件,类似下面这个简单的例子这样:

<div class="g-father"> <div class="g-children"> <input type="button" value="Button"> </div> </div>

1
2
3
4
5
<div class="g-father">
    <div class="g-children">
        <input type="button" value="Button">
    </div>
</div>

CSS

html, body, .g-father, .g-children { padding: 30px; border:1px solid #999; } input { ... &:focus { background: #00bcd4; } } html:focus-within { background: #e91e63; } body:focus-within { background: #ff5722; } .g-father:focus-within { background: #ffeb3b; } .g-children:focus-within { background: #4caf50; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
html,
body,
.g-father,
.g-children {
    padding: 30px;
    border:1px solid #999;
}
input {
    ...
    &:focus {
        background: #00bcd4;
    }
}
html:focus-within {
    background: #e91e63;
}
body:focus-within {
    background: #ff5722;
}
.g-father:focus-within {
    background: #ffeb3b;
}
.g-children:focus-within {
    background: #4caf50;
}

上海时时乐走势图官网 8

CodePen Demo — :focus-within 冒泡触发

这个选择器的存在,让 CSS 有了进一步的让元素持久停留在一种新状态的的能力。

下面几个例子,看看 :focus-within 可以提供什么能力,做些什么事情。

 

div {

感应用户聚焦区域

它或它的后代获得焦点,这一点使得让感知获焦区域变得更大,所以,最常规的用法就是使用 :focus-within 感应用户操作聚焦区域,高亮提醒。

下面的效果没有任何 JS 代码:

上海时时乐走势图官网 9

这里是什么意思呢?:focus-within 做了什么呢?

  • 我们无须去给获焦的元素设置 :focus 伪类,而是可以给需要的父元素设置,这样当元素获焦时,我可以一并控制它的父元素的样式

核心思想用 CSS 代码表达出来大概是这样:

<div class="g-container"> <div class="g-username"> <input type="text" placeholder="user name" class="g_input" > </div> <div class="g-username"> <input type="text" placeholder="code" class="g_input" > </div> </div>

1
2
3
4
5
6
7
8
<div class="g-container">
    <div class="g-username">
        <input type="text" placeholder="user name" class="g_input" >
    </div>
    <div class="g-username">
        <input type="text" placeholder="code" class="g_input" >
    </div>
</div>

CSS

.g-container:focus-within { ... input { .... } }

1
2
3
4
5
6
7
.g-container:focus-within {
    ...
    input {
        ....
    }
}

DEMO — CSS focus-within INPUT

运用上面思想,我们可以把效果做的更炫一点点,在某些场景制作一些增强用户体验的效果:

上海时时乐走势图官网 10

DEMO — PURE CSS FOCUS By :focus-within

 

  background: rgba(0,0,0,.15);

实现掘金登录动效切换

juejin.im是我很喜欢的一个博客网站,它的登录有一个小彩蛋,最上面的熊猫在你输入帐号密码的时候会有不同的状态,效果如下:

上海时时乐走势图官网 11

利用本文所讲的 focus-within ,可以不借助任何 Javascript,实现这个动效:

上海时时乐走势图官网 12

感兴趣的可以戳这里看看完整的Demo代码:

CodePen Demo — 掘金登录效果纯CSS实现

 

 

最后

感谢耐心读完。本文只是抛砖引玉,期待发掘 focus-within 更多有意义的用法。

更多精彩 CSS 技术文章汇总在我的 Github — iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

  padding: 10px;

兼容性

好了,例子举例的也差不多了,下面到了杀人诛心的兼容性时刻,按照惯例,这种属性大概率是一片红色,看看 CANIUSE,截图日期(2018/08/02),其实也还不算特别惨淡。

上海时时乐走势图官网 13  

 

示例演示

6、:read-write选择器

</form>  

  </div>

3、:checked选择器

使用“:read-write”选择器来设置不是只读控件的文本框样式。

div{

 

form {

    top:50%;

  position: absolute;

 

  </div>

  border-color: #ccc;

input[type="text"]:disabled {

.clearfix::before,

示例演示:

  <div>

    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);

    </div>

}

}

  </div>

  font-weight: bold;

  width: 300px;

  padding: 10px;

 

      <input type="checkbox" checked="checked" id="usename" /><span>√</span>

  font-family: Arial;

input[type="text"]{

    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);

  </div>

    <label for="name">Text Input:</label>

    <input type="text" name="name" id="name" placeholder="大漠" />

 

  border-color: #f36;

    position:absolute;

    </div>

CSS代码:

    <label for="address">地址:</label>

  position: absolute;

input[type="text"]:read-only{

CSS代码:

    right:10px;

  margin: 50px auto;

  width: 20px;

input {

    <label for="name">姓名:</label>

CSS代码:

input[type="checkbox"]:checked   span {

    <input type="text" name="name" id="name" placeholder="我是可用输入框" />

 

 

}

}

    bottom:0;

 

form {

  

HTML代码

    left:10px;

 

}

  vertical-align: middle;

HTML代码:

    box-shadow:0 0 20px rgba(0,0,0,0.8);

    height: 0;

“:disabled”选择器刚好与“:enabled”选择器相反,用来选择不可用表单元素。要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。

4、::selection选择器

  border: 1px solid #ccc;

    <input type="text" name="name" id="name" placeholder="大漠" />

 

CSS代码:

 

    <lable for="usename">我是选中状态</lable>

  <div class="wrapper">

    <label for="name">姓名:</label>

 

  border: 1px solid orange;

  padding: 10px;

  border-radius: 5px;

 

HTML代码:

  top: -10px;

}

  background: #fff;

  padding: 5px;

    -moz-border-radius:100px / 10px;

    <label for="address">地址:</label>

 

 

 

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的,效果如下图所示:

 

  border: 2px solid orange;

input[type="text"]:-moz-read-write{

  color: rgba(0,0,0,.15);

  margin-bottom: 10px;

  margin-bottom: 20px;

 

input[type="text"]:read-only{

.effect::before, .effect::after{

input[type="checkbox"]   span {

在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

}

 

  opacity: 1;

</form>  

  opacity: 0;

“:read-write”选择器刚好与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。

    display: block;

 

</form> 

CSS代码

  </div>

  background: red;

 

示例演示:

  border: 2px solid red;

input[type="text"]:-moz-read-only{

    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />

 

 

  border-radius: 5px;

  border: 1px solid rgba(0,0,0,.15);

    <input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />

  border-radius: 3px;

通过“:read-only”选择器来设置地址文本框的样式。

 

  right: 3px;

    z-index:-1;

 

  <div>

  <div>

  border-color: #ccc;

通过“:checked”状态来自定义复选框效果。

示例演示

  background: #fff;

 

    <label for="name">Text Input:</label>

  padding: 20px;

}

  border: 1px solid #ccc;

form > div {

<form action="#">

  margin: 50px;

  border: 1px solid orange;

 

 

<form action="#">

<form action="#">

  margin: 30px auto;

<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体,</p>

}

 

 

   <div>

</form>  

  top:0;

HTML代码:

  -webkit-transform: rotate(30deg);

    content: ".";

  margin-bottom: 10px;

示例演示

 

  <div>

2、:disabled选择器

  color: green;

  border: 1px solid #ccc;

  <div>

  border-color: #ccc;

 

form {

  width: 300px;

 

  </div>

.box input {

}

  

  <div class="wrapper">

 

5、“:read-only”伪类选择器

form {

 

.clearfix::after {

    visibility: hidden;

::-moz-selection {

  position: relative;

<form action="#">

当然可以利用他们制作出其他更好的效果,比如右侧中的阴影效果,也是通过这个来实现的。

CSS代码:

 

::selection {

      <input type="checkbox"  id="usepwd" /><span>√</span>

  background: red;

 

</form>  

    <label for="usepwd">我是未选中状态</label>

 

}

关键代码分析:

  transform: rotate(30deg);

}

 

.clearfix {zoom: 1;}

}//说白了就是给可用的输入框添加样式

  </div>

通过“:disabled”选择器,给不可用输入框设置明显的样式。

 

 

 

有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。

}

.box {

 

}

 

  left:0;

  border: 1px solid orange;

  margin: 50px auto;

form > div {

HTML代码:

    <div class="box">

 

用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了“readonly=’readonly’”

 

}

 

 

}

  margin-right: 10px;

 

2、Firefox 支持替代的 ::-moz-selection。

  </div>

 

 

  height: 20px;

}

.box span {

input[type="text"]:read-write{

 

 注意:

  margin-bottom: 10px;

  border-color: #ccc;

  border-color: #f36;

::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。

  width: 300px;

input[type="text"]:enabled {

}

通过“::selection”选择器,将Web中选中的文本背景变成红色,文本变成绿色。

}

 

}

  </div>

}

.wrapper {

  <div>

 

通过“:enabled”选择器,修改文本输入框的边框为2像素的红色边框,并设置它的背景为灰色。

 

}

    <input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />

7、::before和::after

  background: #ccc;

  background: #fff;

input[type="text"]{

从上图中可以看出,用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中,默认显示样式为:蓝色背景、白色文本。

 

  margin: 20px;

 

在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。(大家都知道,要覆写这两个按钮默认样式比较困难)。在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

  </div>

1、IE9 、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

  font-size: 30px;

.clearfix:after {clear: both;}

}

 

 

  color: orange;

  color: green;

  opacity: 0;

    <input type="text" name="name" id="name" placeholder="可用输入框"  />

 

}

    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />

  <div>

示例演示

<form action="#">

    content:"";

  padding: 5px;

 

本文由上海时时乐走势图发布于web前端,转载请注明出处:神奇的选择器 :focus-within上海时时乐走势图官网

您可能还会对下面的文章感兴趣: