Guide to inserting an icon within an input field

Seeking assistance in placing the checkmark icon inside the input box at the right corner.
Additionally, I would like to know if it's feasible to show a 'Field Saved' message alongside the tick icon?

Update:
If the form contains multiple inputs on a single row, how can the icons be displayed inside the input boxes?

Fiddle: https://jsfiddle.net/sanadqazi/5Len09ad/1/

.test {
  position: relative;
}

.test .fas.fa-check {
  position: absolute;
  top: 0;
  right: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1f051d051a">[email protected]</a>/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<div class="row">
  <div class="col-8">
    <div class="test">
      <input type="text">
      <i class="fas fa-check inp"></i>
    </div>
  </div>
  <div class="col-4">
    <div class="test">
      <input type="text">
      <i class="fas fa-check inp"></i>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e08a9195859299a0d3ced5ced1">[email protected]</a>/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aadac5dadacfd884c0d9ea9b849b9b9a0">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a7a61666167746555213b233b24">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

htmlcssbootstrap-4input-field

Answer №1

To solve this issue, a touch of CSS is all you need.

You can choose to insert the code snippet provided into a stylesheet or a style block. Another option is to apply the styles directly inline on the HTML elements themselves.

Below is the CSS code:

.box {
  position: relative;
}

.box .fas.fa-checkmark {
  position: absolute;
  top: 0;
  right: 0;
}

UPDATE

In case there are multiple select boxes in one row within the form, each must be enclosed in a div with relative positioning and display set to inline.

Answer №2

.col-8,
.col-4 {
  position: relative;
}

.input-container {
  border: solid 1px #000;
  border-radius: 2px;
  position: absolute;
  display: flex;
  align-items: center;
  padding: 4px;
  gap: 4px;
}

.input-container i {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inp {
  height: 36px;
  line-height: 36px;
}

input[type="text"] {
  /* padding-right: 100px; */
  border: none;
  outline: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70121f1f04030402110030445e465e41">[email protected]</a>/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<div class="row">
  <div class="col-8">
    <label class="input-container">
      <input type="text">
      <i class="fas fa-check inp"></i>
      <!-- <span>Field Saved</span> -->
    </label>
  </div>
  <div class="col-4">
    <label class="input-container">
      <input type="text">
      <i class="fas fa-check inp"></i>
      <!-- <span>Field Saved</span> -->
    </label>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef859e9a8a9d96afdcc1dac1de">[email protected]</a>/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c7c637c7c697e22667f4c3d223d3a223d">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de9f3ebf3ec">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

You have the option to create a container for your textbox and tick icon. By transferring all textbox styles to the container, you can achieve a seamless look where the container resembles a textbox itself with the icon and "Field Saved" text embedded within.

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

Tips for resizing a tooltip using CSS

I am currently working on customizing tooltips and would like them to display right below the hover text in a responsive manner, with the ability to have multiline text. Instead of spreading horizontally, I want the tooltip to expand vertically based on th ...

javascripthtmlcss

When I open Firefox, all I see is a blank page with only the h2 heading displayed

I am trying to print the text "I can print" on a page, but only the title shows up and the rest of the page is blank. What mistake might I be making? <!DOCTYPE html> <html> <head> <title>Object exercise 4</title> </head& ...

javascripthtml

What is the best way to align the <text> element within an SVG's parent <g> element?

I'm currently developing a booking tool that requires users to choose a desk on the map by clicking on it. Each desk is enclosed in its own group (<g>) with specific elements like <title>, <path>, and <text>. The issue I' ...

htmlcsssvg

Achieve vertical center alignment for a flexible top navigation that adapts to different screen sizes

To vertically center the text in my top navigation, I attempted to set a height of 3em for my .header and use vertical-align: middle;. However, this caused an issue with my responsive fold-out menu as it could not handle the fixed height, resulting in the ...

htmlcssvertical-alignment

Boost the delay in the transition speed for hiding the Navbar while scrolling down with the help of Bootstrap

Hi there! I am currently learning HTML, CSS, and JS. I'm working on a homepage project using Bootstrap-5 and have successfully integrated a navbar. However, I've noticed that the navbar disappears too quickly when I scroll down. Is there a way to ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Develop a custom Dockerfile for hosting a Python HTTP server in order to showcase an HTML file

I have a folder containing a single HTML file (named index.html) with basic text. When I execute the python command: python -m SimpleHTTPServer 7000 a server is initiated at port 7000 in the same directory to display the page in a web browser. Now, I am ...

htmlpython-2.7dockerdockerfile

Guide on successfully uploading an asp.net application to your server

A few weeks ago, I successfully created an ASP.NET web application using visual studio. If you are interested, find the github repository of my project here. Currently, one of the webpages on my website looks like this. I usually only make changes to ind ...

javascriptc#htmlasp.net

Using the Change event of BootstrapSlider in JQuery is a straightforward process that can enhance the

There are two queries I have regarding the Bootstrap slider. First, how can I implement a change event in the BootstrapSlider and retrieve the value? Secondly, how can I modify the initial value of the Bootstrap slider? ...

javascriptjquerybootstrap-4

What is the ideal solution for resolving the problem of loading HTML page content in this specific situation?

Currently, I am working on an HTML website project where I am integrating header and footer content from separate HTML files into each page using jQuery. However, I have encountered an issue while the page is loading. Upon loading, the content initially ...

javascriptjqueryhtmlcsspageload

Is it possible to connect an AJAX function to a hyperlink for it to function properly?

I am looking to track the number of clicks on outgoing links on my website, without using Digg-like links or redirects. My idea is to use a jQuery function that will call a PHP script via AJAX to update the click counter for each link when clicked. I have ...

jqueryhtmlajaxhyperlink

How can I properly assign the final value after applying a discount to prevent undefined index errors?

Developed a new coupon code system for the admin to generate coupons. In the process, there is a need to calculate the final amount to be paid after applying the discount. An if statement was utilized as shown below: if(!empty($discountCode)) { $amou ...

javascriptphphtmljson

An H1 tag that has a class will take on the attributes of the h1 heading

During my CSS practice, I encountered some confusion regarding Class Selectors. Specifically, I had styled a H1 tag and then applied additional styles to a H1 tag with a class. To my surprise, the H1 tag with a class was inheriting properties from the orig ...

htmlcss

The width of each column in this dataset is variable and unknown

I need to organize a varying number of items into columns. The sizes of both the items and container are unknown, as well as how many columns will fit or what width they should be. I want the browser to arrange the items in as many columns as possible with ...

htmljquerycss

The Bootstrap code is not reflecting as intended

Having trouble getting bootstrap styling to work with my new Angular 6 project. Added ng-bootstrap via npm and included these lines in the index.html: <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965Dz ...

bootstrap-4ng-bootstrap

Other options besides re-flowing and repainting

After doing some research on various platforms like Stack Overflow, I've come across information stating that re-paints and re-flows can be quite taxing on a browser's resources. I am interested in learning about alternative CSS/JS techniques to ...

javascripthtmlcssrepaintreflow

Tips on saving HTML table information into a .txt document?

Welcome to my Unique HTML Table. <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email Id</th> <th>Phone Number</th> <th>Prefered C ...

javascriptjqueryhtml

Enable the use of custom tags containing hyphens in the kses filter for WordPress

I developed a specialized Wordpress plugin that enables users to incorporate custom HTML element tags (such as <my-element>) into the content of a Post. This allows users without the unfiltered_html capability to utilize predefined custom tags. The ...

phphtmlwordpress

Customize tab background color in Material-UI by utilizing a styledTab component with a passed prop

I've customized this tab to have my desired style: import { withStyles } from "@material-ui/core/styles"; const StyledTab = withStyles((theme) => ({ root: { backgroundColor: "yellow", }, }))((props) => { const { shouldSetBackgroundCol ...

cssreactjsmaterial-uimern

Enhancing the visual appeal of HTML code in "view Source" by injecting it using a System.Web.UI.WebControls.Literal

I am currently placing code within a literal in the following manner. ImageItem.Text = string.Format("<div class=\"thumb\"><img src=\"{0}\" width=\"132\" height=\"99\" /><a class=\"more\"> ...

.nethtml

When using the `display: table-cell` property on a div element, it does not automatically respect

How can I restrict the width of columns by defining a width attribute on the div.dcolumn DOM element to preserve the layout with overflowing cells? I want the content of any overflowing cell (like the 9px column) to be hidden while maintaining the specifie ...

javascripthtmlcss