Position the Icon to the Right of an Input Field Regardless of its Width

In need of assistance with aligning icons to the right of three input fields, each with different widths. Currently, the icons are aligned to the right of the parent container instead of the individual input fields.

If you're unsure what I mean, check out this example on CodePen for a visual representation.

.input-container {
  width: fit-content;
  position: relative;
  margin-top: 16px;
}

.input-field {
  padding: 8px 12px;
  border: 1px solid gray;
  position: relative;
}

.input-field.short {
  width: 100px;
}

.input-field.medium {
  width: 200px;
}

.input-field.long {
  width: 400px;
}

.icon {
  position: absolute;
  right: 8px;
  top: 8px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d3dafbcfd4c2c0d6dac8da9dd49cd4d7d7e58687b888dad98e981">[email protected]</a>/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">

<div class="input-container">
  <input class="input-field short" type="text">
  <i class="fa fa-user icon"></i>
  <div>
    <div class="input-container">
      <input class="input-field medium" type="text">
      <i class="fa fa-user icon"></i>
      <div>
        <div class="input-container">
          <input class="input-field long" type="text">
          <i class="fa fa-user icon"></i>

htmlcssinput-field

Answer №1

You seem to have missed out on closing the div tag in your code. Remember, every opening <div> must be followed by a corresponding closing tag </div>. Your code is functional, just make sure to include the closing tags for each div element you use. Take a look at the snippet below for clarification.

.input-container {
  width: fit-content;
  position: relative;
  margin-top: 16px;
}

.input-field {
  padding: 8px 12px;
  border: 1px solid gray;
  position: relative;
}

.input-field.short {
  width: 100px;
}

.input-field.medium {
  width: 200px;
}

.input-field.long {
  width: 400px;
}

.icon {
  position: absolute;
  right: 8px;
  top: 8px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="066069687267716375696b632b6074636346332837332832">[email protected]</a>/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">

<div class="input-container">
  <input class="input-field short" type="text">
  <i class="fa fa-user icon"></i>
</div>
<div class="input-container">
  <input class="input-field medium" type="text">
  <i class="fa fa-user icon"></i>
</div>
<div class="input-container">
  <input class="input-field long" type="text">
  <i class="fa fa-user icon"></i>
</div>

I've made corrections to your codepen code here as well.

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

Set up two separate tables with sufficient space in between each other

Is there a way to align these two tables next to each other with some space between them? Currently, they appear one below the other. How can I make them sit beside each other with spacing in between? If anyone knows how to do this, please help me out. &l ...

htmlcsshtml-table

Exploring the past: the significance of History.js and

I'm looking for a clear explanation of states - anyone care to help? For example, let's talk about the history.js plugin. History.pushState({state:1}, "State 1", "?state=1"); // This code logs {state:1}, "State 1", "?state=1" I have a basic un ...

jqueryajaxhtmlbrowser-historyhistory.js

Binding HTML Elements to JavaScript Values

Currently, I am working on a project with .Net and Vue. However, I am facing an issue in binding a value in a label. <li v-for="restaurant in vHolidays.data" > <form id="1"> <div> ...

htmlvue.js

Rotating 3D cube with CSS, adjusting height during transition

I'm attempting to create a basic 2-sided cube rotation. Following the rotation, my goal is to click on one of the sides and have its height increase. However, I've run into an issue where the transition occurs from the middle instead of from the ...

javascriptjquerycss

Utilizing Beautiful Soup in Python to extract specific information from HTML

When I made the decision to extract content from a website, like I aimed to organize the ingredients into a text file. The ingredient list can be found within: < div class="ingredients" style="margin-top: 10px;"> and each individual ingredient ...

pythonhtmlparsingbeautifulsoup

Develop websites for specific iOs versions as well as various Android versions

When it comes to targeting specific versions of Internet Explorer, conditional comments or hacks can be used. Is there a similar method for targeting different versions of iOS? I'm facing an issue with my website functioning perfectly on iOS 4.2 and ...

androidhtmlioscss

What sets apart element.class from element .class in CSS?

I've been puzzled trying to figure out why my CSS was not applying when I had mydiv .myclass { font-size: 24px !important; } But then I randomly decided to try mydiv.myclass { font-size: 24px !important; } and surprisingly it worked perfectly. Wh ...

htmlcss

CSS - using numbers to create dynamic background images

I am looking to create a design where the background images in CSS display increasing numbers per article, like this example: This idea is similar to another post on Stack Overflow discussing using text as background images for CSS. You can find it here: ...

javascriptjqueryhtmlcss

Ways to dynamically allocate HTML space uniformly

Struggling with CSS and HTML in my Angular application right now. Check out this overview of the setup. My goal is to create a central component (Component 1 in the design) with a button from Component 2. My HTML structure would be something like this: & ...

htmlbootstrap-4

Guide on adding HTML to a specific div element in jQuery by utilizing the keyword "(this)"

I have been working on a script for my PHP page in Wordpress to add titles to images in my photo gallery that open in a lightbox. Here's what I developed: $(".responsive1").bind("click", function() { $(this).("<div class='imgTitle ...

javascriptjqueryhtmlappendto

How to dynamically change the color of an AngularJS element based on a condition?

As someone who is new to AngularJS, I am currently working on changing the color of a table element to yellow if the user has voted on a specific choice. <div ng-show="poll.userVoted"> <table class="result-table"> <t ...

cssangularjsconditional-statements

Capturing user input in HTML and passing it to JavaScript

I have a good grasp on how to implement input in HTML to execute JavaScript functions that are defined in the same directory as the HTML file. For example: <input type="button" value="Submit" onclick="someFunc(500)" > When the button is clicked, th ...

javascripthtml

Are there any portable stylus options available?

Hey there! I'm dealing with a situation where the computers at my school are locked down and I can't install software. Does anyone know if there's a way to compile my Stylus code without having to install Node first? Or perhaps, is there a p ...

cssnode.jsportabilitystylus

bootstrap 4.5 navbar spanning the entire width of the screen

I'm facing an issue with creating a basic navbar. It's not extending the full width of my page and not responding to color classes either. Here's the code for my header: <body> <div class="container-fluid"> <header> ...

htmlbootstrap-4responsive

Concealing the primary div within a Vue child component

Is there a way to conceal the primary div within a Vue application created using Vue-CLI? I attempted adding the display property, but it did not solve the problem. I am attempting to hide it within my Channels component. Here is how my main component lo ...

javascripthtmlcssvue.js

Is there a difference in the functionality of CSS :invalid between Chrome and Firefox?

I am facing a challenge with styling my invalid elements in HTML forms. It is simple in Chrome, but Firefox seems not to recognize my :invalid pseudoclass. To see the difference, try opening the following code snippet in both Chrome and Firefox: <html& ...

htmlcssgoogle-chromefirefox

In Angular 15, CSS override configurations do not function as intended

Exploring the world of Angular is exciting, and I am a newcomer to it. Currently, I am tackling an innovative Angular 15 project that makes use of the Material library. My current predicament lies in the fact that none of the CSS overrides appear to be tak ...

cssangularangular-material

Tips for positioning a sticky div underneath a stationary header

I'm currently utilizing Bootstrap 4 for my project, and I am encountering an issue with maintaining a div that has the class "sticky-top" just below a fixed navbar. Despite attempting to use JavaScript to replace the CSS while scrolling, it hasn' ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

What is the deal with CSS relative magnification?

I am currently utilizing a PHP styleswitcher along with alternate stylesheets in an attempt to replicate the functionality of browser zoom (done using keyboard shortcuts cmd-plus or ctrl-plus). At the moment, when clicking on the "zoom in" graphic, it is ...

csszooming

The iPython terminal is not displaying properly due to a constrained screen width

When my iPython displays a long list, it appears as one tall column instead of utilizing the full width of the terminal screen. I have attempted to adjust the CSS in '.ipython/profile_default/static/custom/custom.css' by setting '.container ...

pythoncssipython