focus-with做一个登录页面

举报
搞前端的半夏 发表于 2022/04/30 21:50:51 2022/04/30
【摘要】 兼容性作为:focus的好兄弟,在兼容性上也还是不错的。主流的浏览器基本都已经支持这个属性。 :focus-within 和 :focus 的区:focus-within 表示一个元素自身获取焦点,以及子元素获取焦点后的效果。:focus 表示元素自身获取到焦点后的效果。 示例定义一个form表单,背景颜色是green。form{ padding: 50px; ...

兼容性

作为:focus的好兄弟,在兼容性上也还是不错的。主流的浏览器基本都已经支持这个属性。
image.png

:focus-within 和 :focus 的区

:focus-within 表示一个元素自身获取焦点,以及子元素获取焦点后的效果。

:focus 表示元素自身获取到焦点后的效果。

示例

定义一个form表单,背景颜色是green。

form{          
    padding: 50px;
    background-color:green ;
}
<form action="">
    <input type="text">
</form>

image.png

定义获取焦点后的效果

form:focus-within{
    background-color: aqua;
}
input:focus{
    background-color: red;
}

当input标签获取到焦点后,背景颜色变成了red,同时form的背景颜色变成aqea
image.png

应用场景- form表单输入(掘金登录页面)

掘金在登录输入密码的时候,这个小人会挡住自己的眼睛,有很多作者用各种方法实现这个效果,:focu-within有同样可以实现这个效果。
image.png

首先实现登陆前的画面(比较丑)

<div class="login">
  <form action="">
    <div class="panfish"></div>
    <div><label for=""> 账号</label> <input type="text" /></div>
    <div><label for=""> 密码</label> <input type="text" /></div>
  </form>
</div>

.login {
    position: relative;
    padding: 2rem;
    width: 20rem;
    font-size: 1.167rem;
    background-color: #fff;
    border-radius: 2px;
    box-sizing: border-box;
  }
  .panfish {
    background: url(https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/ad7fa76844a2df5c03151ead0ce65ea6.svg);
    z-index: 1;
    padding-top: 50px;
    width: 20rem;
    height:50px;
    position: absolute;
    background-repeat: no-repeat;

    top: -60px;
  }
  input:focus {
    background-color: red;
  }

image.png

使用:fous-within

form:focus-within > .panfish {
background: url(https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/4f6f6f316cde4398d201cd67e44ddea3.svg);
background-repeat: no-repeat;

}

获取焦点后的效果

image.png

GIF

focuswithin.gif

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。