Text field imposter - How to move icon to the right when focused

http://jsfiddle.net/g54p4/

If you need to view the HTML and CSS, it's available on jsfiddle.

    <div class="box-input">
    <input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
    </div>

    <div class="box-input">
    <input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
    </div>

CSS

 .box-input{
      border-left: 7px solid transparent;
      cursor: pointer;
      display: block;
      vertical-align: middle;
      width: 100%;
    }
    .box-input:hover, 
    .box-input:focus{
        border-left: 7px solid green;
     }

    .box-input input{
        width: 100%;
        border: 0;
        padding-left: 80px;
    }

    .box-input input:focus,
    .box-input input:hover{
          outline: 1px solid #eee;

    }

    .input-icon-email{
      display: inline-block;
      position: relative;
      vertical-align: middle;
      height: 34px;
      width: 34px;
      background: url('http://mbsales.com/WebAssets/email_icon1.gif') left center no-repeat;
        padding-left: 30px;
    }

I attempted to create a fake input div to show a green left border, but I realized that when I moved to the next field by pressing tab, the green border wouldn't show. Another issue is that if I try to add a green border to the input in the CSS, it only appears when focused, causing the image icon to jump. Additionally, I wanted to push the icon away with left padding, but nothing happened.

I might be approaching this the wrong way. Any help would be appreciated.

Answer №1

Here's a helpful tip for you to enhance your input box:

Interactive Demo

Simply insert this code snippet:

.custom-input input{ border-left: 5px solid transparent;}

Then, update the hover effect for the input field:

.custom-input input:focus,
.custom-input input:hover{
      outline: 1px solid #ccc;
    border-left: 5px solid blue;
}

Answer №2

Another option is to utilize the box-shadow property: Check out the DEMO with an outset effect - Try the DEMO with an inset effect

input:focus {
    box-shadow: -7px 0 0 0 green;
}

Alternatively, you can also use:

input:focus {
    box-shadow: inset 7px 0 0 0 green;
}

These styles will be applied in addition to any existing borders and will persist as long as the input is focused. The outset box-shadow may vary in appearance depending on the browser, while the inset should not. The inset option will also draw over the background on hover if present.

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

Scroll to a new section of the page if the specified id or name cannot be found

Currently, I am dealing with an exceptionally lengthy textual content page. <p class="parahead">401. Heading </p> <p>other html content</p> <p class="c2">some more data</P> ... <p class="parahead">402. Another hea ...

bootstrap modal dialog displayed on the edge of the webpage

I am facing an issue with a modal dialog that pops up when clicking on a thumbnail. The JavaScript code I used, which was sourced online, integrates a basic Bootstrap grid layout. The problem arises when half of the popup extends beyond the edge of the pa ...

Simple steps to generate a static header in list view on asp.net

I'm struggling to keep my header fixed while scrolling and can't seem to figure it out. Below is my ListView Code: <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="FormSectionSubSectionItemRelID" OnSele ...

Tips for ensuring the footer remains at the bottom of the page

I'm struggling with positioning my footer at the bottom of the page. No matter what I try, it just doesn't look right. Here's the code snippet I've been working with: <div id="footer"> <div class="container"> <div ...

Is there a way to maintain image proportions when resizing the window?

I'm in the process of developing a classroom-themed website with interactive overlaying images. The goal is to have various pictures that users can click on to access different resources from different websites. My main challenge right now is getting ...

Having trouble navigating to the bottom of a VUEJS app?

I've been working on developing a chatbot app that utilizes a REST API to stream content. While the functionality of the app is running smoothly, I have encountered an issue with the scroll to bottom feature. Instead of automatically scrolling to disp ...

Different sizes of CSS tables

Creating a responsive layout involves displaying <div> boxes within a grid: The six individual boxes on this page are placed in a row within the HTML source: <div class="control"> <div class="controlContent"> <a>VARIABLE-HEIGHT CO ...

Ways to customize the border of the ListItemButton when it's in a selected state using Material UI?

I'm currently working on a feature that involves highlighting a ListItemButton with a specific background color when selected. However, I now want to take it a step further and add an outline or border color around the ListItemButton when it is select ...

Using PHP to include a class in an input element

Recently, I've been working on a form that involves PHP form validation. In my CSS file, there's a class designated for invalid inputs that I'm trying to add to each one. To see an example, feel free to check out the JSFiddle here. The ".inv ...

What is the best way to enable horizontal scrolling for textarea overflow in a smooth manner like input, without any sudden jumps?

Currently, I am interested in utilizing a one-line textarea (with rows=1 and overflow-x:hidden;) similar to input type="text. However, I have encountered an issue where the content scrolls with "jumps" while typing inside it: https://i.stack.imgur.com/Rzf ...

Container with Two Columns Extending to Full Height of Body

I'm currently referencing this example for reference: . In this layout, the left column has a fixed width in pixels while the right column is resizable. My goal is to set the height of the container to 100% of the body height. For instance, focusing ...

JavaFX text label does not adjust its font according to the CSS file

In my FXML file, the structure is as follows: ... <BorderPane id="header"> <right> <Label styleClass="title" text="A Label" /> </right> </BorderPane> ... I also have a CSS file with the following content: #h ...

Retrieve the width of a fixed div element based on the parent element's width, set

I attempted to set a fixed div to occupy 100% of its parent, but it is taking 100% of the screen instead. You can find the code I used here: http://codepen.io/rodboc/pen/ZOOEWp HTML <div id="wrapper"> <div class="box"> <div class="h ...

Unable to assign a height of 100% to the tr element or a width of 100% to the

While inspecting the elements, I noticed the presence of <tbody>, within which <tr> is nested. The issue arises when the tbody element has 100% height and width as intended, but <tr> always falls short by 4 pixels in height even when styl ...

Utilizing grid for styling headings and paragraphs with h3, h4, and p tags

Looking for help with aligning posts in columns? Here's the code and display challenge: <div class="post-inner"> <h3 class="post-header"><a class="post-title" href="http://www.yellowfishjobs.com/job/sales-representative/">Sales Repr ...

Fill your background with a stunning background image

I have encountered a common issue where the existing solutions do not seem to solve my problem. The background image I am working with is taller than it is wide, and I want its height to be 100% of the body's height. To achieve this, I attempted the f ...

Designing a dynamic left navigation column with collapsible features

I'm currently exploring ways to integrate this style of sidebar navigation with the layout from my JSfiddle. In the first example, the sidebar collapses to the main icons, but the use of the Nav tag is causing it to slide under the content instead of ...

What about a lightbox with enhanced jQuery features?

As a newcomer to jQuery, I've never experimented with lightboxes before. However, I was tasked with creating something fun for April Fools' Day at work. Naively, I accepted the challenge thinking it would be simple, but now I find myself struggli ...

Align an element to the right outside of its parent

I am facing an issue with my parent div and three children. I want one child to float left of the parent, one to be in the exact center of the parent, and one to float right of the parent. However, the floated right element is going outside of the parent d ...

Centering items in Bootstrap 4, while excluding the first element

.c-footer { background: #000; padding: 20px 0; color: #fff; } .c-footer__logo { display: inline; } .c-footer__link { color: inherit; } .c-footer__link a { color: inherit; } .c-footer__link a:hover { color: #fff; } ...