How to animate a search bar using only css and keeping input open for user input?

Question

I attempted to make a search bar template that I can use in various places in my website. It should work by hovering over the icon, making the icon from circle to square, and when a user clicks on the icon it expands the search input. I am having trouble with getting the input field to remain expanded, when I click on the input it closes. I do not want to use JS or jQuery on this. Also when you click on the button again or any other part of the web page the input should close and the information typed should be emptied.

Here is the css section of the code:

 .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>

Any help would be much appreciated!

Answer 1

Not Exactly Work. It closed and open again

 .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;
    }

    .search_inputtext {
    	width: 50%;
    	transition: 0.3s;
    }

    <div class="search_bar">
    				<button class="search_icon">S</button>	
    				<input type="text" name="#" onClick="this.classList.toggle('search_inputtext');" class="search_input">
    							
    			</div>

Answer 2

Because the width of input is set to 0% and it only expands up to 50% when the button is focused.

To keep the input field at the same width when click, you can set the width value for the 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>

Answer 3

Use Jquery instead of CSS. when click outside the focus that was on the button is removed. check below link. thanks

https://codepen.io/Xenio/pen/oJyGLPjquery

Answer 4

Try this one, it should work:

.search_input:focus {
    width: 50%;
}