html - 如何仅使用 css 为搜索栏设置动画并保持输入为用户输入打开？

Question

我试图制作一个可以在我网站的各个地方使用的搜索栏模板。它应该通过将鼠标悬停在图标上，使图标从圆形变为方形，并且当用户单击图标时，它会扩展搜索输入。当我单击它关闭的输入时，我无法让输入字段保持展开状态。我不想在这上面使用 JS 或 jQuery。此外，当您再次单击按钮或网页的任何其他部分时，输入应该关闭并且输入的信息应该被清空。

这是代码的css部分：

 .search_bar {
    	position: relative;
    	top: 0;
    	float: right;
    	right: 20px;
    	width: 100%;
    	background-color: red;
    }
    
    .search_input {
    	width: 0%;
    	margin: 0px;
    	padding: 0px;
    	float: right;
    	height: 36px;
    	border: 2px solid var(--accent_colour_1);
    	outline: none;
    	transition: 0.3s;
    }
    
    .search_icon {
    	float: right;
    	outline: none;
    	padding: 0px;
    	margin: 0px;
    	text-align: center;	
    	height: 40px;
    	width: 40px;
    	right: 0px;
    	border-radius: 100%;
    	background-color: var(--dark_colour);
    	transition: 0.3s;
    }
    
    .search_icon:hover {
    	border-radius: 0;
    	transition: 0.3s;
    }
    
    .search_icon:focus {
    	border-radius: 0px;
    }
    
    .search_icon:focus + .search_input {
    	width: 50%;
    	transition: 0.3s;
    }

    <div class="search_bar">
    				<button class="search_icon">S</button>	
    				<input type="text" name="#" class="search_input">
    							
    			</div>

任何帮助将非常感激！

标签： htmlcss

Answer 1

因为widthofinput被设置为0%并且它只扩展到50%当button聚焦时。

要在单击时保持输入字段的宽度相同，您可以width设置input:focus.

 .search_bar {
    	position: relative;
    	top: 0;
    	float: right;
    	right: 20px;
    	width: 100%;
    	background-color: red;
    }
    
    .search_input {
    	width: 0%;
    	margin: 0px;
    	padding: 0px;
    	float: right;
    	height: 36px;
    	border: 2px solid var(--accent_colour_1);
    	outline: none;
    	transition: 0.3s;
    }
    
    .search_icon {
    	float: right;
    	outline: none;
    	padding: 0px;
    	margin: 0px;
    	text-align: center;	
    	height: 40px;
    	width: 40px;
    	right: 0px;
    	border-radius: 100%;
    	background-color: var(--dark_colour);
    	transition: 0.3s;
    }
    
    .search_icon:hover {
    	border-radius: 0;
    	transition: 0.3s;
    }
    
    .search_icon:focus {
    	border-radius: 0px;
    }
    
    .search_icon:focus + .search_input,
    .search_input:focus /* added this */ {
    	width: 50%;
    	transition: 0.3s;
    }

    <div class="search_bar">
    				<button class="search_icon">S</button>	
    				<input type="text" name="#" class="search_input">
    							
    			</div>