Enlarge the input field when it is selected

Is there a way to expand a search box towards the left instead of the right when focused? The code provided below expands the search box to the right.

HTML:

<input type="text" placeholder="search">

CSS:

 input[type="text"] {
    background: #444;
    border: 0 none;
    color: #d7d7d7;
    width:50px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
     margin:3px 12px;
}

input[type="text"]:focus {
    background:#ccc;
    color: #6a6f75;
    width: 120px;    
    margin:3px 12px;
    outline: none;
}

input[type="text"] {
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

Demo: http://jsfiddle.net/7ppaS/

Answer №1

Consider utilizing the padding-left property to expand to the left, while adjusting the margin-left property to keep the input box in its original position:

input[type="text"] {
    background: #444;
    border: 0 none;
    color: #d7d7d7;
    width:50px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
     margin:3px 80px;
}

input[type="text"]:focus {
    background:#ccc;
    color: #6a6f75;
    padding-left:80px;  
    margin-left:35px;
    outline: none;
}

DEMO: http://jsfiddle.net/7ppaS/4/

Answer №2

Implement the Direction:rtl property in your code:

 input[type="text"] {
    background: #444;
    border: 0 none;
    color: #d7d7d7;
    width:50px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
     margin:3px 12px;
    direction:rtl
}

http://jsfiddle.net/7ppaS/8/

Answer №3

When it comes to accommodating long text within a specific width, using the padding property may not be the ideal solution as it can create a false width. Instead, consider utilizing the width property, which is specifically designed for controlling the width of an element:

input {
  width: 10rem;
  -webkit-transition: all 0.7s ease 0s;
  -moz-transition: all 0.7s ease 0s;
  -o-transition: all 0.7s ease 0s;
  transition: all 0.7s ease 0s;
  direction: rtl
}

input[type=text]:focus {
  width: 15rem;
}
<input type="text" placeholder="search">

Answer №4

An option could be to apply a padding-left:70px; when the element is in focus, causing it to extend towards the left side.

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

Opening a Text File via an ASPX Web Page

Currently, I am immersed in a Web Pages project. The goal is to retrieve text from a Text File and display it within a div element. To achieve this, I utilized the ajax xmlhttprequest method, following a tutorial available at http://www.w3schools.com/ajax/ ...

I wish to simply click on a browser link without the need to open a new tab

Is there a way to programmatically open a link or all links on a website in the same browser without manual clicks or keyboard commands? Essentially, I am looking to automate the process of opening a specific link within a website without the need for an ...

Enhance Material UI BottomNavigationAction by adding a pseudo-element

Trying to enhance a selected item with an additional UI element using a pseudo-element. Specifically, looking to add a line above the menu item. https://i.stack.imgur.com/MZnmw.png The code I've implemented is not displaying the desired line: const ...

The background hue concealing the shadow of another box

I am facing an issue with my table styling where I want to apply a box-shadow effect when hovering over a row. However, despite setting the z-index accordingly, the background color of the td elements ends up covering the box-shadow, resulting in the hover ...

Is it possible to dynamically load JavaScript?

I'm currently working on a project that requires me to dynamically add JavaScript. I have a global.js file that contains all the global variables I need to add dynamically. However, I'm facing an issue where global.js is not being added before ut ...

div positioned on top of additional div elements

My HTML code consists of simple div tags <div class="left">Project Name: </div> <div class="right">should have a name</div> <div>Shouldn't this be on a new line?</div> These classes are defined in a stylesheet as ...

Troubleshooting flow problems in flexbox container for

https://i.stack.imgur.com/ZpVaH.png I have implemented a flexbox-based page layout. The layout consists of two sidebars on the left and right sides, with fixed widths, and a central content panel that dynamically adjusts to fill the remaining space. Howe ...

Populate the div with an image that stretches to the full height

I'm facing an issue with my website's front page design, where a div is divided into two sections using the Twitter Bootstrap grid system. When the second grid (span9) is taller than the first (span3), the image perfectly fills up the span9 area ...

Difficulty arises when trying to merge a dropdown menu with a horizontally scrolling menu

I am attempting to include a dropdown menu within a horizontally long menu. In order to achieve this, I have merged the script for displaying a scrollable menu with that of a dropdown menu. However, in doing so, the dropdown menu does not pop out from the ...

Instructions on how to automatically play multiple video tags on one HTML page while also opening a modal

I'm working on an HTML page that needs to display two different videos in separate modals. My goal is to have each video start playing automatically when the play-video icon is clicked and the modal opens. I attempted this using the code snippet (vid ...

Expanding the text box in PHP to incorporate new lines

So I have an HTML form where users enter addresses in a text box. The PHP code that processes this input looks like this: $address = $_POST["address"]; echo $address; The output currently comes out as one long line, for example: The Manager, Scotia b ...

jQuery functions correctly within jsfiddle, yet it encounters issues when utilized within WordPress

I've been experimenting with a jQuery script to grey out the screen. While it works perfectly on my jsFiddle link provided below, I'm having trouble getting it to work from within my WordPress plugin. Check out the working script on my jsFiddle ...

Is there a way to optimize downloading multiple identical images using html, css, jquery, etc.?

My chess board features 64 squares, each with a picture of a board piece on either a light or dark square. To ensure proper formatting, a Clear knight is placed on the board. The design utilizes a div element with a background image (representing light or ...

Determine if a link can be activated or disabled

Controlling the clickability of a link and displaying an error based on the result of an ajax call is my current objective. <a class="lnkCustomer" href="http://localhost/viewcustomer" target="_blank" data-customerno="2 ...

Troubleshooting issues with hint functionality and fullscreen mode in CodeMirror within a jQuery layout

I have integrated the codeMirror library into the UI Layout Plug-in on my website. Challenges: When using CodeMirror within the layout, the Full Screen Editing feature does not work as intended. Press F-11 to zoom in and Esc to exit full screen mode. I ...

Displaying an HTML string on a webpage

I am developing a user dashboard using Django for a Python-based web application. This web application generates emails, and the HTML content of these emails is stored in a file (and potentially in a database table as well). As part of the dashboard's ...

Bootstrap is an outdated page template that lacks responsiveness

My code below features a page designed using Bootstrap HTML and CSS, but it doesn't look right on all devices. For example, on mobile devices, the grid appears zoomed in and unresponsive. I tried removing grid-template-columns: auto auto;, which fixed ...

Utilize the HTML Tidy executable in combination with PHP, as opposed to compiling it

I have created a PHP application specifically for shared hosting environments. Dealing with the inconsistency of hosts providing HTML Tidy can be challenging for me. Is there a way to integrate the tidy executable directly into my PHP application and proce ...

Enhancing the Appearance of Legends in Chartjs

I'm attempting to customize the legend in my Chartjs chart, but I'm facing an issue where I can't seem to change the font color. What I want to achieve is having the font color in white while keeping the individual item colors intact in the ...

My PHP file is throwing an error that involves converting an array to a string and an uncaught PDOException with the SQLSTATE[HY093] code

I'm encountering an issue with this file. Here are the error messages: Warning: Array to string conversion in C:\xampp\htdocs\backhaul-dispatcher\login\process.php on line 46. Fatal error: Uncaught PDOException: SQLSTATE[HY09 ...