:focus-within 伪类小练习

最新推荐文章于 2024-05-23 22:59:55 发布

iiiilooaixuud

最新推荐文章于 2024-05-23 22:59:55 发布

阅读量48

点赞数

分类专栏： vue 页面遇到的基础问题文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_46617584/article/details/129010075

版权

页面遇到的基础问题同时被 2 个专栏收录

101 篇文章 3 订阅

订阅专栏

vue

91 篇文章 0 订阅

订阅专栏

效果是点击输入框，熊猫图标会来回变化

直接上代码：

<template>
<div class="login-form">
    <h2>账密登录</h2>
    <div class="form-item form-tel">
        <input maxlength="64" placeholder="邮箱/手机号（国际号码加区号）">
        <img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/greeting.1415c1c.png" class="greeting">
    </div>
    <div class="form-item form-password">
        <input class="form-password" type="password" maxlength="64" placeholder="请输入密码">
        <img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/blindfold.58ce423.png" class="blindfold">
    </div>
    <img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/normal.0447fe9.png" class="normal">
    <button class="btn-submit">登录</button>
</div>
</template>

<script lang="ts" setup>
</script>

<style lang='less'>
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #e9e9e9;
}
.login-form {
    width: 370px;
    margin: 100px auto;
    padding: 24px;
    background-color: #fff;
    position: relative;
    h2{
        color: #333;
        font-size: 18px;
        margin-bottom: 24px;
    }
    input {
        outline: none;
        padding: 10px;
        margin-bottom: 10px;
        width: 100%;
        border: 1px solid #e9e9e9;
        border-radius: 2px;
        box-sizing: border-box;
        font-size: 16px;
    }
    input:focus{   
        border-color: #007fff;
    }
    img{
        width: 120;
        height: 95px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .form-tel img{
        height: 113px;
    }
    .form-password img{
        width: 103px;
        height: 84px;
    }
    .form-item img{
        display: none;
    }
    .form-item:focus-within ~ img{
        display: none;
    }   
    .form-item:focus-within {   
        img {
            display: block;
        }
    }
    .btn-submit{
        width: 100%;
        height: 40px;
        color: #fff;
        background-color: #007fff;
        border-radius: 2px;
        outline: none;
        box-sizing: border-box;
        cursor: pointer;
        margin-top: 10px;
        border: none;
        padding: 8px 20px;
    }
}
</style>

另外：

怎么让图片居中