如何使我的搜索栏不崩溃时，它是集中？
如何使我的搜索栏不崩溃时，它是集中？
提问于 2020-03-01 11:10:24
当搜索栏本身收到焦点时，我似乎无法从崩溃中获得搜索栏，但我的鼠标并没有将其悬停。如何使我的搜索栏在收到焦点时不会崩溃，即使我的鼠标指针没有在它上盘旋？
下面是CSS和HTML：
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #474646;
height: 40px;
border-radius: 50px;
padding: 10px;
}
.search-box .search-btn {
color: #bb14bb;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #474646;
display: flex;
justify-content: center;
align-items: center;
transition: .4s;
}
.search-box .search-text {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: .4s;
line-height: 40px;
width: 0px;
}
.search-box:hover>.search-text {
width: 240px;
padding: 0 6px;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div class="search-box">
<input class="search-text" type="text" name="box" placeholder="Search here...">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-01 11:24:00
你需要激活focus @这个类..search text，我修改了您的代码并将它添加到给定的代码中，当您将鼠标悬停在方框之外时，除非您单击，否则不会松开大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.search-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #474646;
height: 40px;
border-radius: 50px;
padding: 10px;
}
.search-box .search-btn{
margin-top: -10px;
color: #bb14bb;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #474646;
display: flex;
justify-content: center;
align-items: center;
transition: .4s;
}
.search-box .search-text{
margin-top: -10px;
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: .4s;
line-height: 40px;
width: 0px;
}
.search-box:hover > .search-text{
width: 240px;
padding: 0 6px;
}
/*this will keep your text box active as far as its in focus, even the mouse is hovered away.*/
.search-text:focus{
width: 240px;
padding: 0 6px;
}
</style>
<body>
<div class="search-box">
<input class="search-text" type="text" name="box" placeholder="Search here...">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</body>
</html>Stack Overflow用户
发布于 2020-03-01 11:25:30
您可以使用Javascript实现这一点，方法是在元素上创建.search-text。
这将防止搜索栏在悬停并包含值后关闭。
这是密码，
if(search.value){
search.style.width = "240px";
search.style.padding = "0 6px";
}将检查搜索输入字段中是否存在任何值，如果存在，则将保持与悬停时相同的宽度。
工作片段如下，
const search = document.querySelector('.search-text');
search.addEventListener('mouseleave', () => {
if(search.value){
search.style.width = "240px";
search.style.padding = "0 6px";
}
}).search-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #474646;
height: 40px;
border-radius: 50px;
padding: 10px;
}
.search-box .search-btn{
margin-top: -10px;
color: #bb14bb;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #474646;
display: flex;
justify-content: center;
align-items: center;
transition: .4s;
}
.search-box .search-text{
margin-top: -10px;
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: .4s;
line-height: 40px;
width: 0px;
}
.search-box:hover > .search-text{
width: 240px;
padding: 0 6px;
}<div class="search-box">
<input class="search-text" type="text" name="box" placeholder="Search here...">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
备注：您也可以添加CSS，
.search-text:focus{
width: 240px;
padding: 0 6px;
}但是，当您单击搜索框外部时，这将关闭搜索框，即使搜索框中有一个值，所以最好以JS方式处理它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60474445
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号