CSS To Put Icon Inside An Input Element In A Form - GeeksforGeeks

Trang chủ » Html Css Icon Box » CSS To Put Icon Inside An Input Element In A Form - GeeksforGeeks

Có thể bạn quan tâm

CSS to put an icon inside an input element in a form asks how to style an input field to include an icon within the input box itself. This typically involves using CSS to position the icon alongside the text, providing a visually integrated user interface.

CDN Link:

Include the Font Awesome library to use a variety of icons in your project:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

Example 1: Adding an Icon Inside an Input Element

In this example centers input fields with icons inside. It uses Font Awesome for the icons and CSS for positioning. Each input field has an icon positioned to the left, creating a visually appealing form.

html <!DOCTYPE html> <html> <head> <title>Put icon inside an input element</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body{ text-align:center; } h3{ text-align:center; } div{ max-width:400px; margin:auto; } .input-icons{ width:100%; margin-bottom:10px; } .input-iconsi{ position:absolute; } .icon{ padding:10px; min-width:40px; } .input-field{ width:100%; padding:10px; text-align:center; } </style> </head> <body> <h3> Icons inside the input element </h3> <div> <div class="input-icons"> <i class="fa fa-user icon"></i> <input class="input-field" type="text"> <i class="fa fa-instagram icon"></i> <input class="input-field" type="text"> <i class="fa fa-envelope icon"></i> <input class="input-field" type="text"> <i class="fa fa-youtube icon"></i> <input class="input-field" type="text"> <i class="fa fa-facebook icon"></i> <input class="input-field" type="text"> </div> </div> </body> </html>

Output : Example 2: Enhancing the Input with Additional CSS Properties

This example shows how to put an icon inside an input element in a form with some CSS properties.

html <!DOCTYPE html> <html> <head> <title>Put icon inside an input element</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body{ text-align:center; } form{ max-width:450px; margin:auto; } h2{ color:green; } .input-icons{ width:100%; margin-bottom:10px; } .input-iconsi{ position:absolute; } .icon{ padding:10px; color:green; min-width:50px; text-align:center; } .input-field{ width:100%; padding:10px; text-align:center; } </style> </head> <body> <form> <h2>GeeksforGeeks</h2> <div class="input-icons"> <i class="fa fa-user icon"></i> <input class="input-field" type="text" placeholder="Username"> </div> <div class="input-icons"> <i class="fa fa-envelope icon"></i> <input class="input-field" type="text" placeholder="Email"> </div> <div class="input-icons"> <i class="fa fa-key icon"></i> <input class="input-field" type="password" placeholder="Password"> </div> </form> </body> </html>

Output:

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples .

Comment More info Next Article How to Add Icon in Form Input Field in Tailwind CSS ?

S

Sabya_Samadder Follow Improve Article Tags :
  • Web Technologies

Từ khóa » Html Css Icon Box