⽤css或js实现⽂本输⼊框的特效
1、⽂本框默认点击特效:
点击⽂本框，外围会出现蓝⾊阴影，取消该特效，为该⽂本框添加css样式"outline:none; box-shadow:none"，就取消了默认特效。必要时可以加!important增加优先级
2、实现百度搜索框点击特效：
点击⽂本框，⽂本框的边框出现蓝⾊实线，我学习到的实现⽅法：
基础的html元素：
css：为需要该特效的⽂本框设置该css样式
js：当⿏标点击该⽂本框时，该⽂本框的类名改变
3、输⼊框特殊点击特效
css鼠标点击样式
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test2</title>
</head>
<body>
<div class="main">
<form >
<input type="text">
<span class="span">
<label>⽤户名 :</label>
</span>
</form>
</div>
<style>
.main {
height: 500px;
width: 800px;
margin: auto;
}
.main form {
position: relative;
font-weight: blod;
}
.main input {
height: 50px;
width: 300px;
margin: auto;
border: 0;
box-shadow: none;
border-bottom: 1px solid #6a7989;
transition: border-bottom 0.5s;
}
.main .span {
position: absolute;
left: 0;
bottom: 0;
height: 50px;
}
.main label {
font-weight: bold;
color: #6a7989;
line-height: 50px;
display: block;
}
.main input:focus {
outline: none;
border-bottom: 2px solid aqua;
}
</style>
<script>
var span = ElementsByTagName('span');
var input = ElementsByTagName('input');
input[0].onfocus = function() {
span[0].style.bottom = '30px';
}
input[0].onblur = function() {
span[0].style.bottom = '0';
}
}
</script>
</body>
</html>
View Code
原理：
应⽤position定位⽂本在特定的位置上，⽤onfocus和onblur等绑定聚焦及失焦事件改变css属性总结：
学习了js选取html元素的⽅法：
ElementById("id")；返回⼀个
ElementsByClassName("classname")；返回⼀个类数组
3document.querySelector("选择器")；返回⼀个//querSelectorAll；返回⼀个数组
学习了css的display属性：
display：inline;⾏元素，不换⾏
display:block；块元素，可调宽⾼
display:inline-block;⾏内的块，有两者的优点。
写这些，相当于对我的⼀个记录，如果我的表述有误，请⼤家多多指教。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。