开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在边框内的文本字段中添加自定义图标

在网页设计中，为文本字段（如输入框）添加自定义图标是一种常见的增强用户体验的方法。这种设计可以帮助用户更好地理解输入框的用途，或者提供一个直观的操作入口。

基础概念

CSS Sprites：一种CSS图像合并技术，可以将多个小图标合并到一张大图中，通过CSS的background-position属性来显示需要的图标部分。
SVG图标：使用可缩放矢量图形（SVG）作为图标，因为它们可以无损缩放，非常适合响应式设计。
伪元素：使用CSS的:before或:after伪元素可以在元素的内容前后插入内容，常用于添加图标。

优势

提升视觉效果：图标可以使界面更加生动和专业。
增强可用性：图标可以作为视觉提示，帮助用户理解功能。
节省空间：相对于文本标签，图标占用的空间更少。

类型

前置图标：图标显示在输入框内部的前方。
后置图标：图标显示在输入框内部的后方。
悬浮图标：当用户鼠标悬停在输入框上时显示的图标。

应用场景

搜索框：通常在搜索框左侧放置放大镜图标。
邮箱输入：在邮箱输入框左侧放置信封图标。
密码输入：在密码输入框右侧放置眼睛图标，用于切换密码的可见性。

实现方法

以下是一个使用CSS伪元素和SVG图标实现前置图标的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Icon in Input Field</title>
<style>
  .input-container {
    position: relative;
    display: inline-block;
  }
  .input-container input {
    padding-left: 30px; /* 留出图标空间 */
  }
  .input-container:before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
    background-repeat: no-repeat;
  }
</style>
</head>
<body>

<div class="input-container">
  <input type="text" placeholder="Search...">
</div>

</body>
</html>

可能遇到的问题及解决方法

图标对齐问题：使用position: absolute和transform: translateY(-50%)可以确保图标垂直居中。
图标大小不一致：使用SVG图标可以避免这个问题，因为它们可以无损缩放。
浏览器兼容性：确保使用的方法在目标浏览器中得到支持，必要时可以使用Polyfill或回退方案。

参考链接

通过上述方法，你可以为文本字段添加自定义图标，提升用户界面的美观性和功能性。

相关搜索:在Label控件中的"文本"字段中添加图标如何在react js中对齐文本框内的图标？在Angular中的文本框内添加附件文件选项使用php (wordpress)在自定义字段中添加特定文本在可视COmposer中添加自定义图标在底部导航中的文本标签后添加图标在带有图像的自定义按钮中添加边距文本字段中的图标不起作用在Vuetify中添加自定义图标或徽标如何在自定义文本字段中添加OnChange 在文本框中添加bootstrap span类图标 VBA在文本框内的以下行中插入数据在警报对话框中添加文本视图边距/填充在列数据框内的字符串中添加字符 Symfony 4，在ChoiceType中添加文本输入字段在图标单击时将图标的值添加到输入字段中在kendo UI搜索文本框中添加清除图标访问在C#中动态声明的文本框内容在django中添加自定义用户注册字段在flutter中的图标上写入文本

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

游戏优化系列二：Android Studio制作图标教程

大家好，我叫Jack冯；本人20年硕士毕业于广东工业大学，于2020年6月加入37手游安卓团队；目前主要负责海外游戏发行安卓相关开发。

03

iOS UITextField详解

除了UITextField对象的风格选项，你还可以定制化UITextField对象，为他添加许多不同的重写方法，来改变文本字段的显示行为。这些方法都会返回一个CGRect结构，制定了文本字段每个部件的边界范围。以下方法都可以重写。

03

最新iOS设计规范五｜3大界面要素：控件（Controls）

iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证用户良好的体验。本文是iOS设计规范系列第5篇，介绍3大界面要素（栏、视图、控件）中的控件（Controls）。首先让我们回顾一下iOS的3大界面要素。 3大界面要素 (Interface Essentials) 大多数iOS应用都是由UI Kit中的组件构建的。UI Kit是一种定义通用界面元素的编程框架，这个框架不仅让APP在视觉外观上保持一致，同时也为个性化设计留有很大空间。UI Kit提供的界面组件有三类：栏（Bars），视图（Views），控件（Controls）。

03

iOS-UITextField 全面解析iOS中UITextField 使用全面解析UITextField的代理方法通知UITextField 在storyboard 中设置属性

iOS中UITextField 使用全面解析建议收藏，用到的时候来这里一查就都明白了 //初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)]; //设置边框样式，只有设置了才会显示边框样式 text.borderStyle = UITextBorderStyleRoundedRect; typedef NS_ENUM(NSInteger, UI

06

Flutter 全栈式——基础控件

当输入框的默认线框无法满足时，可以使用Container容器自定义边框。这时候可以将装饰器设置为InputDecoration.collapsed(hintText: 'hint')表示禁用装饰线

04

使用svgdeveloper 和 svg-edit 绘制svg地图

目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一、SVGDeveloper 5. 方法二、SVG-Edit 1. 描述有的时候我们需要自定义地图，本文提供基本的基于SVG的矢量图制作教程； 2. 准备工作地图模板：例如需要自定义某个省份，挑选一张省份的地图图片即可，本文以吉林省地图为例jilin.png； SVGDeveloper：绘制矢量地图软件，这里提供1.0安装包，试用30天，如需激活，请自行购买SVGDeveloper1.0； SVG-Edit ：绘制矢量地

05

分享15个有用的，你可能还不知道的CSS小技巧，建议每个前端开发者都了解下

为了充分利用这篇文章，我建议你打开一个CodePen或CodeSandbox的选项卡，这样你在阅读文章的同时可以随时调试代码。

04

Qt Style Sheet实践（二）：组合框QComboBox的定制

导读组合框是一个重要且应用广泛的组件，一般由两个子组件组成：文本下拉单部分和按钮部分。在许多既需要用户选择、又需要用户手动输入的应用场景下，组合框能够很好的满足我们的需求。如我们经常使用的

07

最完整的VBA字符串知识介绍（续：消息框和输入框）

消息框是一个特殊的对话框，用于向用户显示一条信息。用户无法在消息框中键入任何内容。通常会创建两种消息框：一种只是显示信息，另一种是希望用户做出决定。

02

Extjs-lesson3

Ext.js 系列课程笔记「组件」更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

02

技巧分享: 如何快速搭建一致统一的设计系统

以下内容由摹客（https://www.mockplus.cn）团队翻译整理，仅供学习交流，摹客设计系统是国内独家设计规范制作平台。

02

技巧分享: 如何快速搭建一致统一的设计系统

以下内容由摹客（https://www.mockplus.cn）团队翻译整理，仅供学习交流，摹客设计系统是国内独家设计规范制作平台。

01

最新Python大数据之Excel进阶

使用工作表中连续区域的所有数据，只需单击该数据区域的任一单元格，通过插入图表命令插入图表即可

05

使用微搭自定义组件实现搜索组件

微搭作为一款低代码开发平台，最大的特点是拖拽化开发，我们只需要拖选组件就可以快速的完成页面的搭建。但在实际的开发过程中，官方提供的组件可能和业务还有一定的距离，不少开发者担心官方组件库不够丰富限制了应用的开发。

03

Axure RP8入门之基本操作篇

格式说明：“Password”表示主要用途；“Input”表示元件类型，一般情况下可省略，当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用；“01”表示出现多个同名元件时的编号；单词首字母大写的书写格式便于阅读。

03

QPushButton 基本使用

PyQt 提供了多种按钮类，用于创建各种类型的按钮。这一部分将打算介绍一下 PyQt 各种 Button 及相关类，并扩展 Button 的功能用法，让你能够打造自己的个性化 Button 。在下面，我先来介绍 PyQt 中常用的按钮类及其主要特点：

04

如何在十分钟内创建一个Chrome 插件

曾经想过制作自己的Chrome扩展，却因为觉得过程太复杂而打消了念头吗？好消息，事情并没有你想象的那么复杂！在接下来的几分钟里，我们不仅将为你详解Chrome扩展的基础知识，还将手把手教你如何用五个简单的步骤创建自己的扩展。

05

使用Cloudera Manager查看集群，服务，角色和主机的图表

对于集群，服务，角色和主机，你都可以查看与之相关的各种指标的图标的仪表盘。虽然对于不同实体的指标显示是不一样的，但是基本功能都是一样的。

09

PyCharm使用指南(个性化设置、开发必备插件、常用快捷键)

在File—>Settings—>Appearance & Behavior—>Material Theme UI—>Settings—>Selected Theme中更改主题

03

让你的 App 更吸引人的 5 个 iOS 库

TKSwitcherCollection 是一组动画开关控件。它非常易于使用-只需下载 TKSwitcherCollection 并将其拖放到项目中，就可以了！

03

flutter 输入框组件TextField的实现代码

顾名思义文本输入框，类似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是为用户提供输入文本提供方便。相信大家在原生客户端上都用过这个功能，就不在做具体介绍了，接下来还是具体介绍下Flutter中TextField的用法。

01

ONLYOFFICE 桌面编辑器 8.1 强势来袭：解锁全新PDF编辑、幻灯片优化与本地化体验，立即下载！AI

详细介绍使用视频链接：ONLYOFFICE 文档8.1新功能简介：功能全面的 PDF 编辑器、幻灯片版式、改进从右至左显示、优化电子表格的协作等等_哔哩哔哩_bilibili

01

ruoyi-vue版本（八）登陆页面的验证码是咋实现的

我们打开若依项目的登陆页面，看到有一个验证码功能，点击一下这个验证码，还会进行变换验证码，那么这个逻辑是咋实现的；

04

自定义角标库

前言角标的需求在app是经常需要用到的,比如未读通知/信息等,一般,我们可以通过嵌套相对布局的方式来设置角标,但是除了TextView，可能Button,ImageView等也需要,那只能写多次这类布局了,而且角标的位置,颜色,形状的多变,自然而然，我们就需要把这些类似的需求归纳后，做出一个通用大部分情况的自定义View.今天给大家介绍我自己定义的角标库和基本构思过程. 特性: 1.TipTextView：提供四种模式,固定模式，(默认/居中)环绕模式，垂直居中环绕模式和水平居中环绕模式,其中固

07

HTML/CSS,说点你可能不知道的技巧

编写插件需要使用图片资源又不适合直接引入时使用base64图片编码进css或js插件

01

2022年最新Python大数据之Excel基础

•此时，B2单元格为被引用单元格，E2单元格为引用单元格，被引用单元格修改，引用单元格同样变化。

02

Human Interface Guidelines —— 概览

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚今天本来惯例打开Material Design，结果发现网站改版了上不去了？？？那我就乖乖开始翻译iOS的组件好了... iOS设计主题作为一名app设计师，您有机会呈现出一款非凡的产品，并将其推向App Store推荐的顶端。为此，您需要满足对质量和功能的高度期望。三大主题将iOS与其他平台区分开来：

08

AngularDart Material Design 输入顶

Selector: <material-input:not(material-input[multiline])>

04

干货：CSS 专业技巧

CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等，也可以使用一个更简化的复位方法：

05

简单了解下无障碍设计模式

一款设计良好的产品可供所有能力的用户使用，包括视力低下、失明、听力障碍、认知障碍或运动障碍的用户。改进产品的无障碍功能可以增强所有用户的可用性，这是非常值得做的事情。

04

最新iOS设计规范三｜3大界面要素：栏(Bars)

iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证用户良好的体验。

01

超实用！手把手教你从头构建UI设计系统

以下内容由摹客团队翻译整理，仅供学习交流。摹客Mockplus是快速的原型设计工具。摹客iDoc是高效的在线协作设计平台。

02

超实用！手把手教你从头构建UI设计系统

以下内容由摹客团队翻译整理，仅供学习交流。摹客Mockplus是快速的原型设计工具。摹客iDoc是高效的在线协作设计平台。

00

最新iOS设计规范十｜5大拓展程序（Extensions)

iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证用户良好的体验。 iOS设计规范系列共10篇。本文是第10篇，介绍拓展程序（Extensions)。

01

Fdog系列（四）：使用Qt框架模仿QQ实现登录界面，界面篇。

Fdog系列（三）：使用腾讯云短信接口发送短信，数据库写入，部署到服务器，web收尾篇。

05

【个人笔记】python界面美化

01

最新iOS设计规范六｜10大交互规范（User Interaction）

iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证用户良好的体验。本文是iOS设计规范系列第6篇，介绍人机交互（User Interaction）。

03

Android开源库：手把手教你实现一个简单好用的搜索框（含历史搜索记录）

对于含有一键清空功能 & 更多自定义样式的EditText自定义控件具体请看我的另外一个简单 & 好用的开源组件：Android自定义EditText：手把手教你做一款含一键删除&自定义样式的SuperEditText

01

非样式布局

非布局样式-字体 * 字体字重颜色大小行高和文字相关的一些 * 背景边框和盒子相关的 * 滚动换行跟页面和布局有关 * 粗体斜体下划线文字装饰性的样式 * 其它 * 字体族(font-family) -- serif 衬线字体：字体周围有装饰性的弯弯钩钩(比如宋体) -- sans-serif 非衬线字体：字体笔画的开始和结束都非常规则。如屏幕上的文字(比如黑体) -- monospace 等宽字体

02

Google Kaptcha验证码的使用

kaptcha 是谷歌开源的非常实用的验证码生成工具，基于SimpleCaptcha的开源项目。使用Kaptcha 生成验证码十分简单并且参数可以进行自定义。只需添加jar包配置下就可以使用，通过配置，可以自己定义验证码大小、颜色、显示的字符等等。下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码进行校验。

03

腾讯开源超实用的UI轮子库，我是轮子搬运工

只需要修改一份配置表就可以调整 App 的全局样式，包括组件颜色、导航栏、对话框、列表等。一处修改，全局生效。

03

flutter TextField换行自适应的实现

无论哪种界面框架输入文本框都是非常重要的控件, 但是发现flutter中的输入框TextField介绍的虽然多,但是各个属性怎么组合满足需要很多文章却说不清楚, 再加上控件版本变更频繁很多功能的介绍都

02

用幻灯片来汇报数据分析结果，导入导出功能是亮点

已经给大家介绍过了非常多的分析数据、观察数据和探索数据的操作和手段，今天就给大家详细介绍一个用于汇报展示数据分析结果的功能操作——幻灯片，以前大家接触的都是WPS中的PPT展示，而我们今天要说的是数据分析工具当中的PPT，要说这两种PPT 是一样的，其实也不违和，都是用于展示结果汇报，但其更多更好用的细节，接下来由我来阐述。

03

DEDECMS 字段的添加和调用方法织梦自定义内容模型管理

在使用dedecms模板的过程中经常会用到一些默认dedecms没有的字段，或者要自己添加自定义内容模型，后台是添加好了，文章也录入了，可（字段无法显示）前台调用不出来怎么办呢？要想实现如下效果：

01

Tkinter教程(每天半小时，3天彻底掌握Tkinter)day2

grid() 方法相比 pack() 方法来说要更加灵活，以网格的方式对组件进行布局管理，让整个布局显得非常简洁、优雅。

02

Flutter | 常用组件

textAlign：文本的对齐方式；可以选择左对齐、右对齐还是居中。注意，对齐的参考系是Text widget本身

03

首页自定义，你想知道的都在这里！

1、管理员进入公司管理后台，点击首页自定义—手机端首页自定义，进入首页展示区块，点击添加新区块。

04

十种UI设计常用字体特效，让你的设计高大上！【萧蕊冰】

今天这篇文章是教你十种UI设计常用字体特效，让你设计出更高逼格的作品。对于我们UI设计师来说，在日常的设计中，给字体增加特效，一直都是一件比较烦人的事。有的老板或客户提出的浮雕特效或阴影，有的时候按他们的要求设计可能会毁了整个作品。更多时候，我们都需要根据整体设计来确定字体使用什么样的特效。今天我们就来讲UI设计常用字体特效，请往下看。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭