How do I add an icon as the placeholder text inside an input field?
The icon is placed outside of the input field. I tried moving it using padding and margin, but I can't seem to position it exactly where I want it.
Your best option is either using CSS Grid or Flexbox to center the icon within a wrapper element.
You can read more about Grid here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
And you can read more about Flexbox here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
Here is an example using Grid:
body {
background: #F5F5F6;
}
label {
display: grid;
grid-template: 1fr / auto 1fr;
gap: 12px;
border: 1px solid #CFD5DB;
border-radius: 5px;
background: #fafafa;
padding: 12px;
color: #6C757D;
cursor: text;
}
label:focus-within {
border: 1px solid #000;
}
label>input {
outline: none;
border: none;
background: transparent;
}
<label>
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input placeholder="Enter Hotel name" type="search" />
</label>
A couple of important things to note about this example:
I've used a label element to wrap the input. This gives us the behavior of clicking the icon to focus the input field without needing to use javascript.
I've used input[type=search] because that is more semantically correct for your usage, and will aid users of screen readers in understanding the purpose of the text field.
I've used the :focus-within pseudo-selector to target and style the label when its child input is focused.
I've opted to use an svg icon but an img based icon will work just as well.
I could've used Flexbox just as easily but I wanted to use the gap property on the wrapping label instead of setting a margin on the icon or input. gap also works with Flexbox the same way it does with Grid except that Safari only supports gap on Grid layouts. If you opt for the Flexbox method, use a margin on one of the child elements instead of gap.
If you are using bootstrap4/bootstrap5 you can do easily
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<div class="container">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-search"></i>
</div>
</div>
<input type="text" placeholder="search here" class="form-control" name="search" />
</div>
</div>
Check this
Place the two inline controls (the image and the input) into a container (e.g. a Div).
The container must be styled position:relative
Style the inline elements as position:absolute; top:0; left:0, which will place them one-on-top-of-the-other. Then use z-index to decide which element is on top and which is below.
Then a bit of padding, so that the input text is pushed over to the right to make room for the image... and you have it.
The border-radius is not necessary - it only rounds the corners of the image.
.iwi{
position:relative;
}
img,input{position:absolute;top:0;left:0;}
input{
z-index:1;
font-size:1.3rem;
padding: 3px 5px;
padding-left:25px;
}
img{
z-index:2;
margin-top:7px;
margin-left:3px;
border-radius: 20px;
}
::placeholder{
color: #ddd;
}
<div class="iwi">
<img src="https://placekitten.com/20/20" />
<input type="text" placeholder="Name the kitten" />
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
.input-field:focus {
border: 2px solid dodgerblue;
}
/* Set a style for the submit button */
.btn {
background-color: dodgerblue;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form action="/action_page.php" style="max-width:500px;margin:auto">
<h2>Register Form</h2>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Username" name="usrnm">
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="Email" name="email">
</div>
<div class="input-container">
<i class="fa fa-key icon"></i>
<input class="input-field" type="password" placeholder="Password" name="psw">
</div>
<button type="submit" class="btn">Register</button>
</form>
</body>
</html>
Related
Can anyone help me to put the tick icon inside the input box at right corner?
Also is it possible to display a 'Field Saved' message along with the tick icon?
Update:
What if form contains multiple input in single row, then how to show icon 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/bootstrap#4.6.1/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/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
A little bit of CSS should do the trick here.
Either add the following code snippet to a stylesheet or to a style block. Alternatively, you could apply the styles inline, directly on the HTML elements themselves.
CSS:
.test {
position: relative;
}
.test .fas.fa-check {
position: absolute;
top: 0;
right: 0;
}
UPDATE
If the form contains multiple select boxes in the same row, then they must be wrapped in a div which has relative positioning and inline display.
.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/bootstrap#4.6.1/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/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
You can add a container element to your textbox and tick icon. Then, you can remove all the styles of the textbox and put similar styles to the container to make it look like the container itself is a textbox. This way, you can make it look like the icon (and the Field Saved text) inside the textbox.
I am trying to decrease the height of the text box .style sheet does not seem to decrease the height of the text box. below is my code and style sheet.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.textmargin{
margin-left: 50px;
}
.new5 {
border: 5px solid green;
border-radius: 2px;
}
.textBoxwidthlarge{
width:40%
}
.textBoxwidthMedium {
width: 20%
}
.textBoxwidthSmall {
width: 40%
}
input[type="text"] {
padding: 12px 10px;
line-height: 2px;
border: 2px solid black;
}
</style>
<div class="col-md-12"><label for="fname" class="textmargin">First Name</label><br />
<input type="text" runat="server" class="input-field textmargin textBoxwidthlarge" id="name1" name="t1" /> </div>
I want the height like so:
any help will be appreciated. I have three text boxes inside a . I am only showing one above.
this way you can customize as you wish
<div class="col-md-4"><label for="fname" class="textmargin">First Name</label><br />
<input type="text" runat="server" class="textmargin textBoxwidthlarge txtboxhg" id="name1" name="t1" /> </div>
<style>
input[type="text"]{ padding: 12px 10px; line-height: 12px; width:100%}
</style>
Remove all the unnecessary styles from your code and just keep one class to set its width.
.textBoxwidthlarge {
width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="col-md-12"><label for="fname" class="textmargin">First Name</label><br />
<input type="text" runat="server" class="input-field textmargin textBoxwidthlarge" id="name1" name="t1" /> </div>
To reduce the height of the text box and add a border, add
height: 1px;
border: 2px solid red;
to the .txtboxhg class
You can decide on your own color and border size.
This question already has answers here:
How do I add a Font Awesome icon to input field?
(8 answers)
Closed 4 years ago.
I was trying to use font awesome and place it inside a search box.
I used the ff html:
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2 search"
type="search"
placeholder="Search.."
aria-label="Search"
/>
</form>
And then to control the layout of the search I place the ff CSS:
input.form-control.mr-sm-2.search{
outline: none;
border: none;
font-size: 12px;
border-radius: 2px;
position: relative;
}
input.form-control.mr-sm-2.search:before{
content: "\f002";
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 13px;
padding-right: 15px;
position: absolute;
top: 15px;
left: 0;
}
Any idea why the font awesome icon don't work?
Did you check by F12 and see console tab? It may be you missing font file and image file.
You should use CDN link:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
I checked some and following could help you.
Put a font-awesome icon inside an input tag
try this
:before or other pseudo classes does not work on self closing elements sucs as <br/>, <img /> or <input /> tags
You can do this as follows
.search-wrap{
position: relative;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
max-width: 200px;
}
.search-wrap input{
border: 0px;
padding-left: 20px;
}
.search-wrap i.fa{
position: absolute;
left: 10px;
top:10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="search-wrap">
<input class="form-control" type="text" Placeholder="Search here.." />
<i class="fa fa-search"> </i>
</div>
It is not showing because ::after and ::before[pseudo-elements] works only when they are defined in containing elements. read W3C specifications
I created a to-do list with jQuery (see CodePen). I wanted the '+' button to be joined with the input box in which you add a to-do list item and for the two to be the same height.
Getting the button to match took a lot of trial and error with the padding. Setting its height to 1.5em to match the input box didn't work, even after setting it to box-sizing: border-box.
Is there a more efficient, accurate way to achieve this?
Here is the relevant CSS:
input[type=text] {
border: 1px solid #ccc;
height: 1.6em;
width: 28.23em;
color: #666;
height: 1.5em;
}
.button {
/* Needed to display button next to input box */
display: inline-block;
vertical-align: bottom;
box-shadow: inset 0px 1px 0 0 #fff;
/* Starts at top, transitions from left to right */
background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
border: 1px solid #ccc;
font-size: 0.7em;
font-weight: bold;
/* First value sets top and bottom padding; second value sets right and left */
padding: 0.53em 0.7em;
text-shadow: 0 1px #fff;
text-align: center;
color: grey;
}
And HTML:
<form name="listForm">
<input type="text" name="listItem"/ placeholder="Add new">
</form><!-- Comment removes gap between inline-block elements
--><button class="button">+</button>
If you are using bootstrap, you can achieve this using input-group, please see: Bootstrap 4 input groups
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Add new" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">+</button>
</div>
</div>
If you want to implement it yourself, you need to put the input and button inside the form. To set their height to be equal, you can set the height of the button to be equal to the height input (1.6 em) + padding of the input (1px top + 1px bottom = 2px):
input[type="text"] {
border: 1px solid #ccc;
height: 1.6em;
width: 28.23em;
color: #666;
}
button.button {
margin-left: -30px;
height: -webkit-calc(1.6em + 2px);
height: calc(1.6em + 2px);
width:25px;
color: grey;
border:none;
}
<form name="listForm">
<input type="text" name="listItem" placeholder="Add new">
<button class="button">+</button>
</form>
reduce the width of the input by 1 em. And set button to float right, It should work.
How do I use the search icon included in Font Awesome for input? I have a search feature on my site (based on PHPmotion), that I want to use for the search.
Here's the code:
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
#ffffff" />
<input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
<div id="searchBoxSuggestions"></div>
</form>
</div>
You can use another tag instead of input and apply FontAwesome the normal way.
instead of your input with type image you can use this:
<i class="icon-search icon-2x"></i>
quick CSS:
.icon-search {
color:white;
background-color:black;
}
Here is a quick fiddle:
DEMO
You can style it a little better and add event functionality, to the i object, which you can do by using a <button type="submit"> object instead of i, or with javascript.
The button sollution would be something like this:
<button type="submit" class="icon-search icon-large"></button>
And the CSS:
.icon-search {
height:32px;
width:32px;
border: none;
cursor: pointer;
color:white;
background-color:black;
position:relative;
}
here is my fiddle updated with the button instead of i:
DEMO
Update: Using FontAwesome on any tag
The problem with FontAwsome is that its stylesheet uses :before pseudo-elements to add the icons to an element - and pseudo elements don't work/are not allowed on input elements. This is why using FontAwesome the normal way will not work with input.
But there is a solution - you can use FontAwesome as a regular font like so:
CSS:
input[type="submit"] {
font-family: FontAwesome;
}
HTML:
<input type="submit" class="search" value="" />
The glyphs can be passed as values of the value attribute. The ascii codes for the individual letters/icons can be found in the FontAwesome css file, you just need to change them into a HTML ascii number like \f002 to and it should work.
Link to the FontAwesome ascii code (cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet
The size of the icons can be easily adjusted via font-size.
See the above example using an input element in a jsfidde:
DEMO
Update: FontAwesome 5
With FontAwesome version 5 the CSS required for this solution has changed - the font family name has changed and the font weight must be specified:
input[type="submit"] {
font-family: "Font Awesome 5 Free"; // for the open access version
font-size: 1.3333333333333333em;
font-weight: 900;
}
See #WillFastie 's comment with link to updated fiddle bellow. Thanks!
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
Create an <input> tag followed by a standard <i> tag with the icon you need.
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
See the three code snippets below for the HTML / CSS / JS.
Or the same in JSFiddle here:
Example: http://jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() {
alert('Searching for ' + $('#filter').val());
});
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
For those, who are wondering how to get FontAwesome icons to drupal input, you have to decode_entities first like so:
$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);
Change your input to a button element and you can use the Font Awesome classes on it. The alignment of the glyph isn't great in the demo, but you get the idea:
http://tinker.io/802b6/1
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
#ffffff" /><!--
--><button class="icon-search">Search</button>
<div id="searchBoxSuggestions"></div>
</form>
</div>
#search-bar .icon-search {
width: 30px;
height: 30px;
background: black;
color: white;
border: none;
overflow: hidden;
vertical-align: middle;
padding: 0;
}
#search-bar .icon-search:before {
display: inline-block;
width: 30px;
height: 30px;
}
The advantage here is that the form is still fully functional without having to add event handlers for elements that aren't buttons but look like one.
Similar to the top answer, I used the unicode character in the value= section of the HTML and called FontAwesome as the font family on that input element. The only thing I'll add that the top answer doesn't cover is that because my value element also had text inside it after the icon, changing the font family to FontAwesome made the regular text look bad. The solution was simply to change the CSS to include fallback fonts:
<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">
font-family: FontAwesome, Roboto, sans-serif;
This way, FontAwesome will grab the icon, but all non-icon text will have the desired font applied.
.fa-file-o {
position: absolute;
left: 50px;
top: 15px;
color: #ffffff
}
<div>
<span class="fa fa-file-o"></span>
<input type="button" name="" value="IMPORT FILE"/>
</div>
simple way for new font awesome
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="txtSearch" >
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
to work this with unicode or fontawesome, you should add a span with class like below, because input tag not support pseudo classes like :after. this is not a direct solution
in html:
<span class="button1 search"></span>
<input name="username">
in css:
.button1 {
background-color: #B9D5AD;
border-radius: 0.2em 0 0 0.2em;
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5);
pointer-events: none;
margin:1px 12px;
border-radius: 0.2em;
color: #333333;
cursor: pointer;
position: absolute;
padding: 3px;
text-decoration: none;
}