How to control the CSS transition?

I am creating a search bar that accepts search terms from user.I have inserted a CSS transition (it’s width increases on click).The problem I am facing is that when i click the submit button the width of the search bar decreases.I don’t want that to happen and the search bar should retain its changed width.
Here is the HTML:


Here is the CSS:

input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid black;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url(“”);
/background-position: 10px 10px;/
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;

input[type=text]:focus {
width: 75%;
here is the link to my pen:

When your input field loses focus, the css width gets removed.

You can try putting this behavior in your JS, something like this.


But if your mouse leaves the input field, it stays at 75% width.