纯css实现input获得焦点边框变色、div被点击变色
写的一个简单的vue登录界面先来看看实现的效果:(这里按钮登录div被点击会变色)然后来看看代码实现<template><div class="icontent"><div class="logincontent"><h3>师生互动-登录&
·
写的一个简单的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自带的边框
更多推荐
已为社区贡献27条内容
所有评论(0)