Switching input size

I need assistance with making the input search field wider when clicked on. The transition should be smooth, expanding from right to left. Initially, the input is positioned on the right side of the page and upon clicking, it should stretch to the left by a certain number of pixels.

Below is my CSS:

#header #search input {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 178px;
height: 21px;
border: 1px solid #CCCCCC;
border-radius: 6px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;

}
#header #search input:focus {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 300px;
height: 21px;
border: 1px solid #CCCCCC;

I would appreciate any guidance on how to achieve this effect.

htmlcsscss-transitions

Answer №1

input[type="search"] {
  background: #FFF;
  padding: .5rem 1rem;
  position: relative;
  top: 0;
  left: 0;
  width: 178px;
  height: 40px;
  outline: none;
  border: 1px solid #CCCCCC;
  border-radius: 6px;
  transition: all .5s;
}

input[type="search"]:focus {
  width: 300px;
  top: 0;
  right: 100%;
}
<div style="text-align:right;">
  <input type="search" id="search" />
</div>

Answer №2

Align the input by using absolute positioning and ensuring the right property value is set to zero:

position:absolute;
right:0;

This will cause the expansion to occur towards the left when focused.

View jsFiddle example

Answer №3

Adjust your containers to be offset parents by using position: relative.

#header, #search {
    width: 100%;
    position: relative;
}

Next, position your input element with position: absolute and align it using the right property.

#header #search input {
    position: absolute;
    right: 0px;
    background: #FFF;
    padding: 1px 1px 1px 5px;
    width: 178px;
    height: 21px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

#header #search input:focus {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 300px;
height: 21px;
border: 1px solid #CCCCCC;

As a result, your animation will expand towards the left side of the container.

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

Ways to execute a task based on various selection option values?

Is there a way to dynamically change the API key value based on the selected currency option? For example, I want to display prices in different currencies like INR, USD, EUR, etc., each requiring a different API key. <select class="form-select for ...

htmldjango

What is the best way to center a parent container vertically?

I currently have a main grid with grid items that are also containers, set as inline-sized containers to allow for different internal layouts based on their width. How can I horizontally align the main grid in the center once it exceeds a certain width? A ...

csslayoutcss-gridcontainer-queries

The Materialize CSS tabs are aligning vertically below each other, but functioning correctly upon refreshing the page

When using materialize css tabs, all the divs load one below the other on the initial page load. If I refresh the page, it starts behaving properly. <div class="row"> <div class="col s12"> <ul class="tabs"> <li class="tab col s ...

javascripthtmlcssreactjsmaterialize

Creating an atom without any boundaries: A step-by-step guide

While browsing the Atom forum, I stumbled upon a post discussing scripts for enhancing the UI of Atom. I'm curious about where to place these scripts. Should they go in the Atom init script? Any guidance would be highly valued. Visit this link for m ...

csssassatom-editor

Align a span vertically within a div

I need help aligning the content "ABC Company" vertically within a div using Bootstrap 4's alignment helper classes. Despite my efforts, I have not been successful. Here is the code I am using: <div class="container" style="width: 740px;"> < ...

htmlcsstwitter-bootstrapbootstrap-4

Optimizing CSS With jQuery During Browser Resize

I am currently facing an issue with recalculating the height of the li element during window resizing or scrolling. Strangely, on page load, the height is no longer being re-calculated and set to the ul's child height. Here is the code I have written ...

javascriptjquerycss

Creating an interactive dropdown feature using AngularJS or Ionic framework

$scope.AllCities = window.localStorage.getItem['all_cities']; <div class="row"> <div class="col"> <div class="select-child" ng-options="citie.name for citie in AllCities" ng-model="data.city"> <label&g ...

javascriptangularjshtmlionic-framework

Blazor Bootstrap 5 Hover tooltip fails to appear

While working on a simple HTML document with Bootstrap, I implemented a field that displays a tooltip when hovering over the "info" button: https://i.sstatic.net/pfwrK.png Below is the full content of my HTML page: https://i.sstatic.net/zHsUw.png The H ...

c#htmlrazorblazorbootstrap-5

Center text with font awesome symbols

I'm looking for a way to vertically align text next to my FontAwesome icons without using manual padding. Is there a better method for achieving this? https://i.stack.imgur.com/PWwSJ.jpg <div class="row"> <div id="tb-testimonial" class="tes ...

htmlcssfont-awesome

What is the best way to create a mirror effect on one div by clicking another div?

I have created a schedule grid and I am looking for a way to allow users to click on the UK hour and then have the corresponding U.S time highlighted. Is there a CSS solution for this? The functionality I need is to be able to select multiple hours. I have ...

javascriptjqueryhtmlcss

What is the best way to show HTML code on a REACT website without disrupting the existing styles?

I am trying to showcase the following code in a REACT webpage, but it is not displaying as code. Instead, it is showing as actual elements. How can I display the button codes below as actual code? <code> <pre> <Button className='btn-grv ...

htmlcssreactjs

The rotation function of the div element is malfunctioning

Exploring CSS has led me to a peculiar issue where transform:rotate is not functioning as expected. Here is an instance of the animation not triggering: jsFiddle CSS .close { width:100px; height:100px; background:#00f; ...

htmlcsscss-transitionscss-transforms

Tips for verifying blank form fields

Is there a way to validate empty form fields before submission and show an alert? This validation is important as some fields are hidden using v-show. Here is an example: <!DOCTYPE html> <header> <script src="https://unpkg.com/vue@n ...

javascripthtmlvue.js

Modifying an image in a particular row of a table generated using the *ngFor loop in Angular

Currently, I am working on a table generated by ngFor. Each row in the table contains a button with an image as its background: <tbody> <tr *ngFor='let movie of movies let i = index'> <td>...some values here. ...

htmlangulartypescript

The changing of colors does not function properly when clicked in JavaScript

I am having an issue with a drop-down list that offers two options: blue and green. When I select blue and click on the text input field, its background color alternates between blue and black (the default text field color). The same applies when I choose ...

javascriptjqueryhtmlcss

How can I stop the body from scrolling to 100% height when the virtual keyboard is displayed?

My chat app has sticky header and footer elements. To handle the mobile virtual keyboard opening, I adjust the document's height using window.visualViewport.height. For example, if the browser's height is 1000px and the virtual keyboard takes up ...

javascriptcssweb-applicationssticky-footerintersection-observer

jQuery problem causes page to scroll when button is clicked

Is there a way to smoothly scroll to the second section of the page when a button is clicked using jQuery? $('.home_scroll_btn a').on('click', function(){ var scrollPosition = $('#intro-home').offset().top; $( ...

javascriptjqueryhtmlscroll

Eliminating the Skewed Appearance of Text in Input Fields Using CSS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Customized Page Layout</title> <script src="https://c ...

javascripthtmljquerycss

Create collapsible horizontal submenus in Bootstrap for mobile devices

I created a modal specifically for mobile users that displays when they access the site. It features various categories and nested menus for easy navigation. <!-- Modal --> <div class="modal fade" id="exampleModalCenter" t ...

htmltwitter-bootstrapbootstrap-5

Double-executing methods in a component

I have encountered an issue while trying to filter existing Worklog objects and summarize the time spent on each one in my PeriodViewTable component. The problem I am facing involves duplicate method calls. To address this, I attempted to reset the value ...

htmlangulartypescript