纯css实现input获得焦点边框变色、div被点击变色

写的一个简单的vue登录界面
先来看看实现的效果：（这里按钮登录div被点击会变色）

然后来看看代码实现

<template>
    <div class="icontent">
        <div class="logincontent">
            <h3>师生互动-登录h3>
            <input type="text" v-model="username" placeholder="请输入手机号或邮箱">
            <input type="password" v-model="password" placeholder="请输入密码">
            <div class="loginb" @click="loginb($event)">Login 登录div>
        div>
    div>
template>

<script>
    export default {
        name: "login",
        data () {
            return {
                username: '17012345678',
                password: '123456'
            }
        },
        methods: {
            loginb(e) {
                // this.$router.push({ name: 'cousermanager', params: { pagenum: pagenum }})
                // this.$router.push({ name: 'groupwork'})
            }
        }
    }
script>

<style scoped>
    .icontent{
        width: 90%;
        height: 100%;
        margin: 0 5% 0 5%;
        overflow: hidden;
    }
    .logincontent{
        width: 90%;
        height: 100%;
        margin: 50px 5% 0 5%;
        overflow: hidden;
        text-align: center;
    }
    .logincontent input{
        width: 100%;
        height: 35px;
        padding: 3px;
        margin-top: 20px;
        /* 这里是去除掉input的默认样式然后修改为自己的 */
        background:none;  
        outline:none;  
        border:0px;
        /* 这里是修改为自己的样式 */
        border-bottom: 2px solid #dcdcdc;
        border-bottom-left-radius: 1px;
        border-bottom-right-radius: 1px;
        /* 使用怪异盒模型，也可以不使用 */
        box-sizing: border-box;
    }
    /* 这里是设置input获得焦点时的变化 */
    .logincontent input:focus{
        border-bottom: 2px solid #0F996B;
        border-bottom-left-radius: 1px;
        border-bottom-right-radius: 1px;
    }
    /* 为登录div设置样式 */
    .loginb{
        margin-top: 20px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: rgb(7, 187, 127);
        border-radius: 5px;
        font-size: 18px;
        color: #ffffff;
    }
    /* 设置登录div被点击时改变一下背景色 */
    .loginb:active{
        background-color: #0F996B;
    }
style>

注意事项：

1、:active :focus 获得焦点/被点击后的区别：

:active，元素被点击时变色，但颜色在点击后消失。

:focus， 元素被点击后变色，且颜色在点击后不消失。

2、去除默认的input样式

background:none; 去除背景
outline:none; 去除被点击后的默认边框
border:0px; 去除input自带的边框