如何使用 CSS 在表单的 input 元素中放置图标？

2025年3月17日 | 阅读 7 分钟

在本文中，我们将通过各种示例学习如何使用 CSS 在表单的 input 元素中放置图标。

要在 input 元素中放置图标，我们使用了 `` 标签和 `` 标签以及 Font Awesome 库图标。可以通过在图标名称前加上 `fa` 前缀来放置此图标。

以下是将 Font Awesome 库添加到您网页的链接。

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

以下是使用 CSS 在表单的 input 元素中放置图标的各种示例。

示例 1

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
        <title> Icon inside an input element in a form using CSS </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<link rel = "stylesheet"
		href =
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
* { box-sizing: border-box; }
body { 
	background-color: #333; 
	font-size: 1rem; 
	font-family: 'Lato';
	font-weight: bold;
}
input[type="text"] {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0px ;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}
h2 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 4vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s); 
}
input[type="text"]:focus {
  border-color: dodgerBlue;
  box-shadow: 0 0 8px 0 dodgerBlue;
}

.inputWithIcon input[type="text"] {
  padding-left: 40px;
}

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left: 10;
  top: 8px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
}

.inputWithIcon input[type="text"]:focus + i {
  color: dodgerBlue;
}

.inputWithIcon.inputIconBg i {
  background-color: #aaa;
  color: #fff;
  padding: 9px 4px;
  border-radius: 4px 0 0 4px;
}

.inputWithIcon.inputIconBg input[type="text"]:focus + i {
  color: #fff;
  background-color: dodgerBlue;
}

form {
		position: relative;
		width: 780px;
		margin: 2% auto;
		border: .5em solid lighten(deepskyblue, 30%);
		border: .5em solid lighten(deepskyblue, 30%);
		border: .5em solid lighten(deepskyblue, 30%);
		border: .5em solid lighten(deepskyblue, 30%);
		box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
		background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
		background-color: #333;
}
form:before {
		box-sizing: border-box;
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		border: .5em solid lighten(deepskyblue, 30%);
		font-family: 'Permanent Marker', cursive;
		font-size: 2.2em;
		color: rgba(238, 238, 238, 0.7);
		text-align: center;
		 margin-bottom: 80px;
		padding: 20px;
}
label {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 1vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
  margin-bottom: 80px; 
}
.third {
  border-color: 2px white;
  color: #fff;
  transition: all 150ms ease-in-out;
}
.third:hover {
  box-shadow: 0 0 10px 0 #3498db inset, 0 0 10px 4px #3498db;
}
h3 {
text-align: center;
  font-size: 22px;
  font-weight: 700; color:#202020;
  text-transform: uppercase;
  word-spacing: 1px; 
  letter-spacing:2px;
   color: #fff;
  }
  .btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid white;
  border-radius: 0.6em;
  color: white;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}
    </style>
</head>
  
<body>
    <center>
        <form>
            <h2> Example </h2>
			<h3> Icon inside an input element in a form using CSS </h3>
            <div class = "inputWithIcon">
  <input type = "text" placeholder = "Your name">
  <i class = "fa fa-user fa-lg fa-fw" aria-hidden = "true"> </i>
</div>

<div class = "inputWithIcon">
  <input type = "text" placeholder = "Email">
  <i class = "fa fa-envelope fa-lg fa-fw" aria-hidden = "true"> </i>
</div>

<div class = "inputWithIcon">
  <input type = "text" placeholder = "Phone Number">
  <i class = "fa fa-phone fa-lg fa-fw" aria-hidden = "true"> </i>
</div>
<div class = "inputWithIcon">
<input type = "text" placeholder = "Password">
    <i class = "fa fa-key fa-lg fa-fw" aria-hidden = "true"> </i>               
    </div>
<div>
    <input type = "checkbox" id = "t-and-c2" name = "name" />
    <label for = "t-and-c2"> I accept the terms and conditions .</label>
  </div>
<button class = "btn third"> Submit </button>
        </form>
    </center>
</body>
  </html>

说明

我们在上面的示例中创建了一个带有图标的输入元素的が基本表单。

输出

以下是这个例子的输出。

示例 2
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width=device-width, initial-scale = 1.0"> <title> Icon inside an input element in a form using CSS </title> <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0"> <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous"> <style> @import url('https://fonts.googleapis.com/css?family=Raleway:400,700'); * { box-sizing: border-box; margin: 0; padding: 0; font-family: Raleway, sans-serif; } body { height: 100vh; margin: 0 auto; position: relative; background: linear-gradient(to right, #99b5c1, #7e7bb9, #c788b1, #edaf3f); } .container { display: flex; align-items: center; justify-content: center; min-height: 100vh; } h2 { text-align: center; font-weight: normal; color: linear-gradient(55deg, #c788b1, #c788b1); text-transform: uppercase; font-size: 1em; white-space: nowrap; font-size: 4vw; z-index: 1000; font-family: 'Bangers', cursive; text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7); @include skew(0, -6.7deg, false); @include transition-property(font-size); @include transition-duration(0.5s); } .hello { text-align: center; font-weight: bold; color:#6d54a4; text-transform: uppercase; font-size: 1em; white-space: nowrap; font-size: 1vw; z-index: 1000; font-family: 'Bangers', cursive; @include skew(0, -6.7deg, false); @include transition-property(font-size); @include transition-duration(0.5s); } .sc { background: linear-gradient(55deg, #c788b1, #c788b1); position: relative; height: 600px; width: 560px; box-shadow: 0px 0px 24px #5C5696; } .screen__content { z-index: 1; position: relative; height: 100%; } .sb { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } .sbh { transform: rotate(45deg); position: absolute; } .sbh1 { height: 520px; width: 520px; background: #FFF; top: -50px; right: 120px; border-radius: 0 72px 0 0; } .sbh2 { height: 220px; width: 220px; background: #6C63AC; top: -172px; right: 0; border-radius: 32px; } .sbh3 { height: 540px; width: 190px; background: linear-gradient(170deg, #6D54A4, #6A679E); top: -24px; right: 0; border-radius: 32px; } .sbh4 { height: 400px; width: 400px; background: #7E7BB9; top: 420px; right: 50px; border-radius: 60px; } .login { width: 320px; padding: 30px; padding-top: 156px; } .login__field { padding: 20px 0px; position: relative; } .login__icon { position: absolute; top: 30px; color: #7875B5; } .login__input { border: none; border-bottom: 2px solid #D1D1D4; background: none; padding: 10px; padding-left: 24px; font-weight: 700; width: 75%; transition: .2s; } .login__input:active, .login__input:focus, .login__input:hover { outline: none; border-bottom-color: #6A679E; } .login__submit { background: #fff; font-size: 20px; margin-top: 30px; padding: 16px 20px; border-radius: 26px; border: 1px solid #D4D3E8; text-transform: uppercase; font-weight: 900; display: flex; align-items: center; color: #4C489D; box-shadow: 0px 2px 2px #5C5696; cursor: pointer; transition: .2s; } .login__submit:active { border-color: #6A679E; outline: none; } .login__submit:focus { border-color: #6A679E; outline: none; } .login__submit:hover { border-color: #6A679E; outline: none; } .button__icon { font-size: 24px; margin-left: 10px; color: #7875B5; } .social-login { position: absolute; height: 240px; width: 160px; text-align: center; bottom: 0px; right: 0px; color: #fff; } .social-icons { display: flex; align-items: center; justify-content: center; } .sli { padding: 20px 10px; color: #fff; text-decoration: none; text-shadow: 0px 0px 8px #7875B5; } .sli:hover { transform: scale(1.5); } .icon-lock { width: 48px; height: 48px; position: relative; overflow: hidden; margin-left: 25px; margin-bottom: 25px; } .icon-lock .lock-top-1 { width: 40%; height: 40%; position: absolute; left: 50%; margin-left: -20%; top: 14%; background-color: #000; border-radius: 40%; } .icon-lock .lock-top-2 { width: 24%; height: 40%; position: absolute; left: 50%; margin-left: -12%; top: 22%; background-color: #151517; border-radius: 25%; } .icon-lock .lock-body { width: 60%; height: 48%; position: absolute; left: 50%; margin-left: -30%; bottom: 11%; background-color: #000; border-radius: 15%; } .icon-lock .lock-hole { width: 16%; height: 16%; position: absolute; left: 50%; margin-left: -8%; top: 51%; border-radius: 100%; background-color: #151517; } .icon-lock .lock-hole:after { content: " "; width: 43%; height: 78%; position: absolute; left: 50%; margin-left: -20%; top: 100%; background-color: inherit; } </style> </head> <body> <center> <form> <h2> Example </h2> <h3> Icon inside an input element in a Login form using CSS </h3> <div class = "container"> <div class = "sc"> <div class = "screen__content"> <form class = "login"> <div class = "icon-lock"> <div class = "lock-top-1" style = "background-color: #E5E9EA"> </div> <div class = "lock-top-2"> </div> <div class = "lock-body" style = "background-color: #E5E9EA"> </div> <div class = "lock-hole"></div> </div> <div class = "login__field"> <i class = "login__icon fas fa-user"> </i> <input type = "text" class = "login__input" placeholder = "User name / Email"> </div> <div class = "login__field"> <i class = "login__icon fas fa-lock"> </i> <input type = "password" class = "login__input" placeholder = "8+ (a, A, 1, #)"> </div> <div class = "check"> <input type = "checkbox" name = " " id = " "> <span class = "hello"> I'have read and agree with Terms and Conditions </span> </div> <button class = "button login__submit"> <span class = "button__text"> Login </span> <i class = "button__icon fas fa-chevron-right"> </i> </button> </form> <div class = "social-login"> <h3> Or Signup by using </h3> <div class = "social-icons"> <a href = "#" class = "sli fab fa-instagram"> </a> <a href = "#" class = "sli fab fa-facebook"> </a> <a href = "#" class = "sli fab fa-twitter"> </a> </div> </div> </div> <div class = "sb"> <span class = "sbh sbh4"> </span> <span class = "sbh sbh3"> </span> <span class = "sbh sbh2"> </span> <span class = "sbh sbh1"> </span> </div> </div> </div> </form> </center> </body> </html>
说明
在上面的示例中，我们创建了一个在输入元素中带有图标的登录表单。
输出
以下是这个例子的输出。
下一主题如何使用 CSS 更改 PNG 图像的颜色

← 上一篇下一篇 →

如何使用 CSS 在表单的 input 元素中放置图标？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

如何使用 CSS 在表单的 input 元素中放置图标？

示例 1

示例 2

相关帖子

使用 CSS 隐藏滚动条

CSS Center Tag

Zig zag 下拉菜单的 CSS 概念

CSS Pricing Table

Accordion CSS

CSS Corp Pvt Ltd

CSS Font Color

如何使用 CSS 在表格的两行之间添加空格

White Space

CSS First Child

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器