Text animation is not triggered when the focus is removed from the input field without any text present

Having an issue with my search bar

When the user clicks on it, it's supposed to expand with a simple animation to allow typing, and should shrink back if the user clicks elsewhere on the page. However, the problem arises when there is no text entered, as the animation fails to play in reverse and simply reverts to its default size. Refer to the gif below for a visual depiction. https://i.sstatic.net/s0xDD.gif

CSS

.searchbar {
    margin-right: 10%;
    width: 20%;
    height: 50%;
    outline: none;
    border:0;
    outline:0;
    background-image: url('search.png');
    background-position: right; 
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transition: width 0.2s ease-in-out;
    transition: width 0.2s ease-in-out;
    cursor: pointer;
}

.searchbar:focus {
  width: 90%;
  background-color: #E0FFFF;
  border-radius: 20px;
  text-indent: 10px;
  cursor: auto;
}

and the HTML

<input type="text" class="searchbar"></div>

Answer №1

It seems like your codes are functioning correctly. If you take a look below, you'll notice that I added a border to visualize it better.
However, the issue lies in the fact that the

transition: width 0.2s ease-in-out
is only set for the width property. To enhance the display, consider setting transition: all 0.2s ease-in-out.

.searchbar {
  border : 1px solid;
    margin-right: 10%;
    width: 10%;
    height: 50%;
    outline: none;
    outline:0;
    background-image: url('search.png');
    background-position: right; 
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
  border-radius: 20px;
  
}

.searchbar:focus {
  width: 90%;
  background-color: red;
  border-radius: 20px;
  text-indent: 10px;
  cursor: auto;
}
<input type="text" class="searchbar"></div>

Answer №2

You will find the information in this section

I have made changes to .searchbar background-color: transparent;

*,
*::before,
*::after {
  box-sizing: border-box;
}



body{
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-content: center;
  margin:0;
  background-color: bisque;
}

.container{
  width:50vw;
  height: 12.5vh;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  background-color: whitesmoke;
  border-radius: 4rem;
}

.searchbar {
  margin-right: 1rem;
  display: block;
  border-top-right-radius: 4rem;
  border-bottom-right-radius: 4rem;
  width: 10%;
  height: 4rem;
  outline: none; 
  border:0; 
  outline:0; 
  background-image: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fassets.stickpng.com%2Fthumbs%2F585e4ad1cb11b227491c3391.png&f=1&nofb=1'); 
  background-position: right; 
  background-repeat: no-repeat; 
  background-size: contain; 
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  cursor: pointer;
  background-color: transparent;
  font-size:2rem;
}

.searchbar:focus {
  width: 50%;
  background-color: #E0FFFF;
  border-radius: 4rem;
  text-indent: 10px;
  cursor: auto;
}
<div class="container">
      <input type="text" class="searchbar" id="searchbar" />
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Error: The chai testing method appears to be improperly defined and is not

I am trying to set up a Mocha and Chai test. Here is my class, myClass.js: export default class Myclass { constructor() {} sayhello() { return 'hello'; }; } Along with a test file, test.myclass.js: I am attempting to a ...

javascript tabs not functioning as expected in HTML

I am currently putting the finishing touches on a basic website for a project I'm involved in. The site features two tab controls - one on the right side of the page and the other on the left. Each control has 3 tabs that, when clicked, display differ ...

What location is ideal for making API calls with React and Redux-thunk?

After extensively searching on StackOverflow.com and across the internet, I couldn't find a similar question. Therefore, please refrain from giving negative reputations if you happen to come across one as I truly need reputation at this point in my li ...

Tips for managing unfinished transactions through Stripe

I have successfully set up a checkout session with Stripe and included a cancel_url as per the documentation. However, I am facing an issue where the cancel_url is only triggered when the user clicks the back button provided by Stripe. What I want to achie ...

Encountering a 401 error message with a 'truncated server' response while using Google Apps Script

I'm currently working on a code snippet that looks like this. function method3() { var spreadsheetID = '1BGi80ZBoChrMXGOyCbu2pn0ptIL6uve2ib62gV-db_o'; var sheetName = 'Form Responses 1'; var queryColumnLetterStart = ...

Is there a way to modify the color of a checkbox within MUI?

I'm currently customizing the checkbox color in Material UI while using FormIk for data submission. I aim to change the default checkbox color to red, but I'm unsure about how to achieve this. <FormGroup> <Box display=" ...

Vue.js does not support sorting columns

In this specific codepen example, I have created a Vue table that allows for sorting by clicking on the column name. Although I can successfully retrieve the column name in the function and log it to the console, the columns are not sorting as expected. Wh ...

Tips for muting console.log output from a third-party iframe

As I work on developing a web application using NEXT.js, I am encountering an issue with a third party iframe that is generating numerous console logs. I am seeking a way to silence these outputs for the iframe. The code in question simply includes an < ...

Nuxt 3.11 - Best Practices for Integrating the `github/relative-time-element` Dependency

I'm encountering some difficulties while attempting to integrate github/relative-time-element with Nuxt 3.11.2 and Nitro 2.9.6. This is my current progress: I added the library through the command: $ npm install @github/time-elements. I adjusted nux ...

What could be the reason behind my Heroku app suddenly crashing without any visible errors?

After successfully starting the Nest application, about 50 seconds later it transitions from 'starting' to 'crashed'. The last log entry before the crash is a console log indicating the port number. View Heroku logs after successful bui ...

Resizable Bootstrap column-md-4

I need to make a bootstrap column fixed position (col-md-4). This is for a shop layout with 2 columns: Shop content (long & scrollable) col-md-8 Cart content (short & fixed so it stays visible while scrolling the shop content) col-md-4 I'm ...

Combine jQuery and CSS to create a scrollable and extended fixed header

I am experiencing an issue where the header is fixed when scrolled down, but when I scroll back up to the top, it detaches and becomes unfixed again. How can I make the header stay fixed for a prolonged period of time? Are there any specific adjustments I ...

Executing mathematical operations with floating point numbers using JavaScript in Python

I’m creating a Python program that interacts with a web application that I didn’t develop. There is some data that needs to be represented in my program which isn’t directly sent to the client by the server, but is instead calculated separately on bo ...

Trouble displaying background image in Electron Application

When I try to load an image file in the same directory as my login.vue component (where the following code is located), it won't display: <div background="benjamin-child-17946.jpg" class="login" style="height:100%;"> A 404 error is popping up: ...

Enable next-i18next to handle internationalization, export all pages with next export, and ensure that 404 error pages are displayed on non-generated pages

After carefully following the guidelines provided by i18next/next-i18next for setting up i18n and then referring to the steps outlined in this blog post on locize on how to export static sites using next export, I have managed to successfully generate loca ...

Using NPM in conjunction with a PHP/STATIC web site directory structure: A comprehensive guide

My PHP website has a file structure like this: / css/ js/ index.php When I run the following commands: npm init npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdfc5dd">[email p ...

Switching the hierarchy of list items in React

I have a JSON structure with nested elements. const JSON_TREE = { name: "PARENT_3", id: "218", parent: { name: "PARENT_2", id: "217", parent: { name: "PARENT_1", i ...

Passing the value in a td element to a JavaScript function using Thymeleaf onClick

Trying to utilize "Thymeleaf" for the first time, I am attempting to pass a value to JavaScript with the following code: onclick="getPropId('${properties.id}')" The corresponding function is as follows: getPropId(inputID){alert(inputId);} Unf ...

Scoped Styles rarely stand a chance against more dominant styles

I'm facing a scope issue while learning Vue. Question: I am trying to make sure that the styles in profile.vue do not override the ones in sidebar.vue. I want the sidebar to have a red background and the profile section to be blue. Shouldn't usi ...

"What is the best way to eliminate duplicate data from an ng-repeat loop in AngularJS

I have a query regarding appending data from the second table into $scope.notiData in AngularJS. Additionally, I need to figure out how to remove ng-repeat data when the user clicks on the remove symbol X. I have attempted some code but it is not functioni ...