How to Position Icon on the Right Side of an Input Field using CSS

Is there a way to position the magnifying glass icon to the right side of my input field?

Link to my Fiddle.

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
  margin: 30px;
}

.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
}

.search input {
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}

.search input {
  text-indent: 32px;
}

.search .fa-search {
  position: absolute;
  top: 10px;
  left: 10px;
}
<div class="search">
  <span class="fa fa-search"></span>
  <input placeholder="Search term">
</div>

htmlcss

Answer №1

Make sure to adjust the position of the icon by setting the left: 10px property. You can increase the distance from the left side or specify a distance from the right side instead.

.search .fa-search {left: 230px;}

http://jsfiddle.net/xhjLyf1k/1/

To avoid resizing the input field, consider setting the right position instead of the left one:

.search {display: inline-block} /* prevent 100% width */
.search .fa-search {left: auto; right: 10px;}

http://jsfiddle.net/xhjLyf1k/2/

Answer №2

Another way to enhance your design is by utilizing a ::before pseudo-element directly in the CSS code to insert an icon on the right side.

.search::before {
  position: absolute;
  height: 3rem;
  width: 3rem;
  top: 50%;

  transform: translate(-50%, -50%);
  right: 0rem;
  content: "";
  background-image: url('../images/search.png');
  background-size: contain;

}

Answer №3

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<div class='form-group'>
<label>Clave</label>
<div class="input-group input-group-sm" >
 <input class='form-control' type="password">
 <div class="input-group-btn">
 <button type="submit" id="togglePassword" class="btn btn-default fa fa-eye"></button>
</div>
</div>
</div>

Revolutionizing Web Design with Bootstrap and Font Awesome https://jsfiddle.net/jlujan/kgxo81fm/15/

Answer №4

To ensure the icon is always positioned relative to the input, create a relative container span around both elements. This way, the icon will stay in place regardless of where the component is moved within the layout.

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
  margin: 30px;
}

.search {

  color: #aaa;
  font-size: 16px;
}

.form-element {
  position: relative;
}

.search input {
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}

.search input {
  text-indent: 1em;
}

.search .fa-search {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
}
<div class="search">
<span class="form-element">
  <span class="fa fa-search"></span>
  <input placeholder="Search term">
  </span>
</div>

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

What is the best approach for managing the popstate event when the URL no longer exists?

When working with html5 popstate, I have two specific goals in mind. Instead of relying on plugins, I am utilizing these two methods: Push State: function contentLoaded(...) { ... window.history.pushState({ pageUrl: url }, url, url); ... } Po ...

htmlpushstatepopstate

Content overlapped by Bootstrap footer

I've been grappling with this problem for quite some time now. Despite finding numerous discussions on the issue, none of the proposed solutions seem to work for me. My website utilizes a Bootstrap 3 front end and I am aiming to establish a sticky bo ...

htmlcsstwitter-bootstraptwitter-bootstrap-3sticky-footer

Develop a responsive component on the right side

I am encountering an issue with creating a responsive div that matches the height of the image on the left side. I want to include text in this div, however, when I do so, the paragraph expands in height along with the div element when I attempt to change ...

htmlcss

Is There a Workaround for XMLHttpRequest Cannot Load When Using jQuery .load() with Relative Path?

My current project is stored locally, with a specific directory structure that I've simplified for clarity. What I'm aiming to do is include an external HTML file as the contents of a <header> element in my index.html file without manually ...

javascriptjqueryhtmlload

Is there a way to showcase several items simultaneously on a bootstrap 5 carousel slide?

I currently have a bootstrap 5 carousel with controls that I want to modify. My goal is to create a slideshow where each slide displays 2 items, and I can scroll through one image at a time. Starting from here: https://i.sstatic.net/ROgoL.png And ending h ...

cssbootstrap-5

"Embedding social content within an iframe may result in the element being unresponsive

I have a setup where I'm utilizing social embed to include Instagram content in the footer. When I insert the provided iframe code, the layout looks correct but the content is not clickable. <iframe src="https://embedsocial.com/facebook_album ...

javascripthtmlcssiframebootstrap-4

What could be causing issues with the JQuery .Resize() function?

I'm attempting to create a responsive layout where the content div adjusts itself when the user resizes the page. The top and bottom divs are static, so only the content div changes its size based on the page flow. $(window).resize(function() { v ...

jquerycss

Building a Strong Foundation with Bootstrap's Scaffolding and Mixins

I'm a bit confused by the Bootstrap documentation's explanation of scaffolding and mixins. I tried looking up information on scaffolding in CSS, but couldn't find a clear answer. When it comes to mixins, different websites seem to have varyi ...

csstwitter-bootstrap

Incorporating a hyperlink within a list item for an image

Currently, I am attempting to create a clickable image within an unordered list. Although the paragraph is clickable, unfortunately, the image itself is not responding as expected. <ul> <a href="/movies/test/"><li> ...

htmlcss

Customizing jQuery dialog: What is the best way to change the appearance of the close button?

I am struggling to style the close tag in my jQuery dialog box. I have looked through the documentation and tried various CSS alterations, but nothing seems to be working. Any suggestions or insights would be greatly appreciated. My code is provided below ...

javascriptjqueryhtmlcssdialog

Using the ternary operator in React to implement inline styles

Within my React/Typescript project, I aim to dynamically exhibit a color based on the presence or absence of a value in payload[1]. In the code snippet below, note the usage of an inline style tag. <li className="recharts-tooltip-item" style={ ...

javascripthtmlcssreactjstypescript

Guide on implementing CSS3 parser with HtmlUnitDriver

As an example, let's consider a scenario where we have a selector to target the active menu item: $("ul#menu li a[href='/']") And a selector to target the remaining menu items (1): $("ul#menu li a:not([href='/'])") However, the ...

cssseleniumjquery-selectorswebdriverhtmlunit

Issue with page break functionality during print preview

div.pagebreak { page-break-after: always; page-break-inside: avoid; } HTML <!-- Page separator --> <div class="pagebreak" style="float: none;"><hr class="hidden-print" /></div> <app-mud-chec ...

htmlcssangulartypescriptpage-break

The external hyperlink is not functional in Firefox and Chrome browsers, but it operates properly in Internet Explorer 9

For security reasons, it seems that embedding an external link for live scoring from itftennis.com on our website is blocked. If you try to click on the jsfiddle LIVE SCORING link, it will open a page with an error. However, if you click on the address ba ...

c#jqueryhtmlbrowser

Dynamic content display using AJAX

Having already tried to find a solution through Google with no success, I am at a loss. I have articles where a paragraph is initially displayed, followed by a "read more" link which reveals more content using JavaScript. However, this approach may slow do ...

phpjavascripthtmlajax

Guide to optimizing the display of a responsive iframe across various devices such as mobile and desktop

I have implemented the following CSS in an iframe to make it responsive. It works well on desktop browsers, but on mobile browsers, the iframe only displays half of the screen. Can you please review the code below and provide guidance on how to fix this is ...

htmlcss

Discovering the clicking actions on PDF elements within an HTML environment

I am currently working on developing a web application that involves rendering various pdf objects. My main goal is to be able to detect the position of a click inside the pdf container. However, it seems like the OnClick event is not functioning as expe ...

javascriptjqueryhtml

Problem with aligning an image horizontally within a DIV

Can anyone help me align the picture of the planet horizontally in the middle of the DIV section "about us" on my website? I've tried using text-align:center; in the CSS but it doesn't seem to work. Any suggestions would be appreciated. Thank you ...

cssalignment

Guide to displaying an input box depending on the selection made in a Mat-Select component

I am working on a mat-select component that offers two options: Individual Customers and Organizational Customers. When selecting Individual Customers, the dropdown should display three options: First Name, Last Name, and Customer Id. However, when choosin ...

htmlangulartypescript

Pros and cons of leveraging a hybrid HTML/Objective-C app for the iPhone platform

When creating an app, what are the key benefits or drawbacks to consider when deciding between utilizing HTML/UIWebView for certain parts (such as styled menus and pages with complex layouts) versus going completely native? I'm eager to learn from ot ...

iphonehtmlobjective-cipaduiwebview