Adding an image or icon inside an input field can be a great way to improve the user experience of your website or web application. It can help to make the input field more visually appealing, and it can also provide additional information to the user. In this blog post, I'll show you how to add an image or icon inside an input field using HTML and CSS.
You may have seen in many websites login, registration, contact form etc, that image or icon is inside the input fields. You can see the below image that, second input field have image inside the input field. In this tutorial we going to learn it.
While we won't directly embed an image or icon within the input tag itself, we can create the visual effect of it being inside. Here's how:
- Construct a div element: Begin by creating a div to house both the input tag and the image.
- Nest the input and img tags: Within the div, place the input tag and the img tag.
Apply CSS styling:
- Add a border-bottom to the div to establish a visual boundary for the input field. You can also add to all sides. (Also read: Input field border animation).
- Set the div's display property to flex, which aligns the input and image elements horizontally.
- Remove any default borders or outlines from the input tag to seamlessly blend it with the div's border.
By following these steps, you'll achieve the desired appearance of the image or icon residing within the input field, even though it's technically positioned within the enclosing div.
Video Tutorial: Adding Images or Icons to Input Fields
Design Input Field With Image/Icon Inside It .
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
Steps for designing input field with image/icon inside it.
Step 1: Create the basic HTML structure and add div tags.
I began by establishing the fundamental HTML structure and incorporating two div tags with the class names container and box. The box class is nested within the container class, and I applied styling to position the box class in the center of the container class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: rgb(232 232 232);
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 350px;
background-color: #fff;
padding: 20px 10px;
}
Output :
As you can see in the image above, their is rectangular white box within the class name container. I haven't specified height to it, but I have added padding 20px top and bottom and 10px left and right that why it visible. Now lets add input field and img tag inside an box class name element.
Step 2 : Add div tag, input tag and img tag.
Now lets add input field and img tag in element with class name box. But we want input field and image to looks side by side. So to achieve that, I have added another element (div tag) with class name input_box and nested the input tag and img tag inside it. and set display: flex; to element with class name input_box, so the input tag and img tag look side by side.
HTML
<div class="input_box">
<input type="text" placeholder="Username">
<img src="image/user.png">
</div>
CSS
.input_box{
display: flex;
width: 100%;
}
.input_box input[type="text"]{
font-size: 25px;
padding: 5px 0px;
width: 100%;
}
img{
width: 30px;
height: 30px;
margin-left: 20px;
}
Output :
Step 3: Add Image/Icon Within the Input Field.
So as I mentioned above in blog post that input field appears that it contain image within, but actually, its not, we just make it to appear like that. So to achieve it, we'll add border-width : 0px 0px 2px 0px and border-style: solid to element with class name input_box (By doing this border bottom is added to input_box class name).
CSS
.input_box{
display: flex;
width: 100%;
border-width: 0px 0px 2px 0px;
border-style: solid;
}
Output :
CSS
.input_box input[type="text"]{
border: none;
outline: none;
font-size: 25px;
padding: 5px 0px;
width: 100%;
}
Output :
You may also like:
- Floating placeholder.
- Input field animation (highlight input field on focus).
- Custom choose file button.
- Increment & decrement counter.
- Remove spaces from input field text.
- Replace multiple spaces between words with single space.
- Create input field that allows only alpha numeric values in it using JavaScript.
Final code:
So that's how you can create an input field that have image inside using HTML & CSS. If you have any question or suggestion, feel free to write them in the comment section.
Share your thoughts.