Looking for tips on how to achieve a sleek search bar expansion effect when focusing using w3.css?

I have been trying to utilize the following code to create a Google search bar that expands when focused within a w3.css navigation bar-item. While it does expand and contract on focus/blur, I am unable to achieve smooth transitions between sizes. The search bar simply jumps from small to large without any transition effects. Any tips or suggestions would be greatly appreciated. Thanks in advance!

input[type=text] {
    size:20;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    }
<form method="get" action="http://www.google.com/search">
    <div class="w3-bar-item w3-right w3-hide-small w3-padding-
    1"style="border:2px dotted black;padding:1px;width:15em;">
    <table border="0" align="right" cellpadding="0">
    <tr><td>
    <input class="w3-small w3-bar-item" type="text"   name="q" size="20" 
    style="color:#808080;
maxlength="200" value="Google Search..."
onfocus="if(this.value==this.defaultValue)this.value=''; 
    this.style.color='black'; this.size='25';" 
    onblur="if(this.value!='this.defaultValue')this.value=this.defaultValue;this.size='20';"/>
    <button type="submit" class="btn btn-primary w3-right w3-small w3-theme-l1 
    w3-button   w3-bar-item ">
    <i class="fa fa-search"></i> 
</button>

</table>
</div>

</form>

javascripthtmlcssw3.css

Answer №1

It's as simple as adding the following code snippet:

.search {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 5px;
  width: 75px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease; 
 }
 .search:focus {
  width: 200px;
}
<div class="search-container">
            <input class="search" type="search" placeholder="Search">
</div>

Answer №2

Here is an effortless way to achieve the same result.

$(document).ready(function() {
  $(".btnSearch, .txtSearch")
  .on("click", function(e) {
    $(".txtSearch").animate({
      width: "50%"
    }, 300);
  })
  .on("blur", function(e) {
    $(".txtSearch").animate({
      width: "20%"
    }, 300);
  });
});
*{
  font-family:arial;
  font-size:12px;
  color:#000000;
}
.txtSearch {
  width: 20%;
  padding:10px;
}
.btnSearch{
  background:#FFFFFF; 
  color:#000000;
  padding:10px;
  width:10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divSearch">
  <input type="text" id="txtSearch" name="txtSearch" class="txtSearch" />
  <input type="button" id="btnSearch" name="btnSearch" value="Go" class="btnSearch" />
</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

An issue has occurred: Cannot access the properties of an undefined object (specifically 'controls')

I encountered an error message stating "TypeError: Cannot read property 'controls' of undefined" in the code that I am not familiar with. My goal is to identify the source of this error. Below is the HTML code snippet from my webpage: <div ...

javascriptangular

Could the autofill feature in Chrome be turned off specifically for Angular form fields?

Even after attempting to prevent autofill with autocomplete=false and autocomplete=off, the Chrome autofill data persists. Is there a method to disable autofill in Angular forms specifically? Would greatly appreciate any recommendations. Thank you. ...

javascriptangulargoogle-chrome

Count of jSon objects

After receiving a string st from a web service, I convert it into an object. How can I determine the number of arrays inside this object? In this particular case, there are 2 arrays. var st = "{[{"Name": "fake", "Address": "add"]},[{"Name": "fake", "Addre ...

javascriptjson

Is it possible to update a Rails element using an AJAX request?

I've delved into a plethora of information regarding Rails, AJAX, and 5.1 Unobtrusive Javascript. It provides insight on how to handle AJAX calls in Rails with a .js file, for example. However, my goal isn't to serve up an entire .js file; rathe ...

javascriptruby-on-railsajax

Does the current protected route that I am on restrict the user from navigating back to the Home component?

I'm having trouble figuring out how to redirect the user to the Home component when they logout. The API is functioning correctly based on my tests. However, I am unsure of how to implement the logout method in the current context to successfully log ...

javascriptreactjsdebuggingreact-hooksmaterial-ui

Utilize CSHTML Script to Show HTML Content When SQL Query Results in Null

I have a CSHTML Script that a friend has written, and I am currently making some changes to it. I have a SQL Query saved as a variable and if this query returns NULL, then I want to display different HTML compared to when it returns results. Below are the ...

htmlasp.net-mvc-3razorif-statement

What is the best way to add an element when a checkbox is selected and delete it when it is dese

How can I display the text of selected elements and remove them when unchecked from a list of orders? When an element is checked, its value is added to the sum and its text is displayed. If it is unchecked, its text should be removed. Click here for the co ...

jqueryhtml

Tips for choosing all elements in a form that have a specific class assigned

I am attempting to target all fields in a form with a specific class name and then select all the remaining fields. This is my form: <form style="margin:20px 0" id="myform_2"> <p> Query Name : <input i ...

javascriptjquery

Is there a way to remove most HTML tags while retaining certain ones?

Looking for a solution to filter out all HTML codes from a PHP string except for: <p> <em> <small> The strip_tags() function is helpful, but it removes all HTML tags. Is there a way to specify that only the listed tags should be removed ...

phpregexstringhtml

Is there a way to transform a circular structure into JSON format?

I retrieved data from the database and now I need to format it, but I encountered the following error: TypeError: Converting circular structure to JSON --> starting at object with constructor 'NativeConnection' | property ' ...

javascriptjquerynode.js

Exploring the documentation of JQuery's $.Ajax Function

Can anyone help me locate the parameters in the JQuery Docs? jqXHR.done(function( data, textStatus, jqXHR ) {}); http://api.jquery.com/deferred.done/ I've been trying to determine what data represents but haven't had any luck. I've notic ...

javascriptjqueryajax

Empty array is logged by the server after sending a JavaScript variable through post request

When I use console.log(request.body), the terminal displays {} instead of logging the variable ownerSteamId. Here is my code: Server-side JavaScript: const express = require('express'); const app = express(); const bodyParser = require('bod ...

javascriptnode.jsexpressbody-parser

"Encountering a problem with using setState in React Hook useEffect

I am currently utilizing the useState hook with two arrays: imageList and videoList. In my useEffect hook, I iterate through the data using forEach method. If the type of the item is an image, it should be pushed to the imageList array. However, after exec ...

javascriptreactjsecmascript-6react-hooks

The Mongoose connection status is consistently showing as 0

Utilizing nodejs and mongoose to establish a connection with my MongoDB Database. I am attempting to check the connection state, specifically if it is connected or not. I am using mongoose.connection.readyState to achieve this. The connection seems to be ...

javascriptnode.jsmongodbmongoose

What is the best way to conceal the broken image icon using PHP?

UPLOAD PICTURES IN DATABASE: if (!isset($_FILES['gambarid']['tmp_name'])) { echo ""; }else{ $rand5=rand(); $image_name5= addslashes($_FILES['gambarid']['name']); $fileext5=explode('.&ap ...

phphtmlimageicons

Having trouble with getting v-cloak to function properly when dealing with asynchronous requests

I wanted to explore using the v-cloak directive to showcase a loading spinner while certain data properties in vue js are being loaded asynchronously for me to integrate into a table component. After successfully applying and styling my v-cloak styles on ...

javascriptvue.jsvuejs2

Experiment with jQuery and JavaScript compatibility specifically on Internet Explorer 6

Seeking advice on the most effective method to test my web app using IE6. I currently have IE8 installed on my computer, and am considering utilizing a Virtual Machine. Are there any other alternatives worth exploring? It is imperative that my jQuery and ...

javascriptjquery

The custom service is failing to load, in the simplest terms possible

After creating a dataService.j that contains the following: angular.module('dataService', []) .service('gameDataService', function() { var _gameData = { loggedIn: "false", gameJoined:"false", tableFu ...

javascriptangularjs

Arrange the elements in an HTML table with the first and last columns on the left and right sides

Is it feasible to have the first and last columns of an HTML table fixed while allowing the middle columns to be scrollable? (This functionality is achievable in jQuery DataTables, but what about a basic HTML table?) ...

htmlcsshtml-tablesticky

Switch tabs with JavaScript

I'm encountering an issue with changing tabs using JavaScript and Ajax. The script I have works when not using Ajax but fails to work properly with it. Here is the script: $(document).ready(function(){ $("#mtabs li").click(function() { ...

javascriptjqueryajax