How to control css transition? - css

Question

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:
<input type="text" placeholder=" search" id="search">
<button type="submit" id="submit" >submit </button>
</form>
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("http://icons.iconarchive.com/icons/ampeross/qetto-2/256/search-icon.png");
background-size:40px;
/*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;
margin-left:7%;
}
input[type=text]:focus {
width: 75%;
}
Here is the link to my code if it helps:
https://codepen.io/ryoko1/pen/eRMYrg?editors=1111

Answer 1

The problem I am facing is that when i click the submit button the width of the search bar decreases.
That's because as soon as input losses it's focus it decrease it's input width back to originally assigned or default width. This even happens when you click anywhere else in the page not only submit button and reason is it lost focus from input. So do using jQuery click() method.
$("input[type='text']").on("click",function(){
$(this).css("width","75%");
}); //Add this to your jQuery
$(document).ready(function() {
var url = "https://cors-anywhere.herokuapp.com/https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=bill gates";
$.getJSON(url, function(data) {
// console.log(data[1]);
});
$("#submit").click(function() {
// document.getElementById("demo").innerHTML("hello");
// console.log("hello");
});
$("input[type='text']").on("click", function() {
$(this).css("width", "75%");
});
});
body {
background-color: black;
background-repeat: no-repeat;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Wikipedia-logo-en-big.png/800px-Wikipedia-logo-en-big.png");
}
h1 {
color: white;
text-align: center;
}
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("http://icons.iconarchive.com/icons/ampeross/qetto-2/256/search-icon.png");
background-size: 40px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out .1s;
margin-left: 7%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Wikipedia Viewer</h1>
<form>
<input type="text" placeholder=" search" id="search">
<button type="submit" id="submit">submit </button>
</form>
<p id="demo"></p>

Answer 2

You can use transition delay (set to 100ms):
transition: width 0.4s ease-in-out .1s;
Additional reset delay on focused element:
input[type=text]:focus {
transition-delay: 0s;
}