首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我想在搜索栏图标中画一个小圆圈,可以吗?

可以的。在前端开发中,你可以使用CSS来实现在搜索栏图标中画一个小圆圈。具体的实现方式如下:

  1. 首先,在HTML中创建一个搜索栏,并在其中添加一个图标元素,例如使用<i>标签或者<span>标签来表示图标。
代码语言:txt
复制
<div class="search-bar">
  <input type="text" placeholder="搜索">
  <i class="icon"></i>
</div>
  1. 接下来,在CSS中定义图标元素的样式,并设置其为圆圈形状。
代码语言:txt
复制
.icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
}

通过设置widthheight属性为相同的值,以及border-radius属性为50%,可以将图标元素设置为一个圆圈。

  1. 最后,根据实际需求调整图标元素的位置和样式。
代码语言:txt
复制
.search-bar {
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

通过设置position: absolute属性,可以将图标元素相对于搜索栏进行定位。通过设置topright属性,可以调整图标元素的位置。通过设置transform: translateY(-50%)属性,可以将图标元素在垂直方向上居中对齐。

这样,你就可以在搜索栏图标中画一个小圆圈了。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android通知微技巧,那些你所没关注过的小细节

但是由于这篇文章稍微有点特殊,讲的是Android通知微技巧,刚好和我的上一篇的博客可以形成一连续关系,因此这次就在博客上重新发表一下。...现在使用Android 6.0系统的Nexus 5手机运行这个程序,并触发上面那段通知逻辑,效果如图下图所示: ? 可以看到,通知上弹出了一通知图标。...可以看出,它们的通知小图都是没有RGB色的,图标是只有白色一种颜色,然后借助alpha图层来绘制出一logo的样式。 因此,按着这种设计要求,将项目的通知图标改成了这个样子: ?...这里我们来仔细观察一下这个下拉后的大图,其实前面大家应该也已经注意到了,只不过一直没提,在大图标的右下角,还有一比较小的圆圈,在这个圆圈嵌套着我们设置的小图标。...但是如果我们再看仔细一点,你会发现网易的图标更好看一些,因为系统给右下角的这个小圆圈默认是设置成灰色的,和我们的整体色调并不搭配,而网易则将这个小圆圈改成了红色,因此总体视觉效果更好。

1.9K80

Affinity Designer 初体验 | Sketch的替代品?

简单清爽的UI,丰富的功能,让很是喜爱。使用Windows之后,找到了Adobe XD这一替代品。然而,在使用一段时间了之后,逐渐被它混乱的功能所逼疯。...直到我遇见了Affinity Designer( 下载 / 购买 / 安装 请支持正版(或合理使用搜索引擎) 界面 ?...上方是选项 左侧有工具 右侧有属性 某些(比方说颜色)属性会出现在左上角 熟悉之后就感觉,世界清净了不少,找回了Sketch的感觉 一些常用功能 关于鼠标滚轮 alt + 鼠标滚轮:旋转画布 control...左侧工具 ? 移动工具:顾名思义 ---- ? 画板工具:创建画板 ? ---- ? 节点工具:顾名思义,编辑节点 节点变换工具:以某一点为中心,拖动一路径上的某一节点进行变换: ? ?...注意:下面两种图中圈出的拾色图标并不是单击就行的,它是拖拽的(这个设计真的想吐槽 好脑瘫,然后拾色结束后还要再点击旁边的有颜色的小圆圈改变颜色(裂 ? ? ---- 设置吸附: ?

1.6K30
  • ps是干什么?专业图像处理软件Photoshop中文版,ps软件下载安装

    在PS软件,用户可以使用各种不同的工具来进行图像处理。例如,用户可以使用选择工具、套索工具、魔术棒工具等来选择图像的某个区域。...4,运行后,跳出一安装的选项。 语言:默认简体中文,不用更改。...在PS软件,可以通过“文件”-“打开”来选择需要处理的照片。 选择“修补工具”。在PS软件的工具,可以找到一“修补工具”,它的图标是一带有一小圆圈的针头。...使用鼠标在照片中选择需要修复的斑点,然后用修补工具轻轻的画一下。 适当调节画笔大小。根据斑点的大小,适当调节修补工具的画笔大小,以便更加精确地修复斑点。 重复操作直到斑点消失。...在修复完一斑点之后,可以继续选择下一斑点进行修复,直到所有的斑点都被处理完成。 保存修复后的照片。在完成斑点修复后,可以将修复后的照片保存为所需的格式。

    1.1K00

    未来布局之星——ConstraintLayout

    切换视图 点击菜单的Show Design、Show Blueprint和Show Design + Blueprint按钮可以对操作视图进行切换,如下图所示: ?...添加约束演示 可以看到,按钮控件有四方向的约束,如下图所示,按钮的上、下、左、右边上各有一小圆圈,鼠标可拖动小圆圈到ConstraintLayout,与其添加约束。 ?...删除单个约束 除了上面这种删除方法,也可以在属性面板,将鼠标移动到下图红色框框标记的位置,待出现叉叉图标,点击可删除该约束。 ?...删除单个约束 删除单个控件的所有约束 用鼠标点击控件,在其左下方会出现一小叉叉图标,点击小图标即可删除当前控件的所有约束。 ?...删除单个控件的所有约束 删除当前界面的所有约束 点击工具删除所有约束图标的按钮,即可删除当前界面所有的约束。 ?

    1.9K20

    可以伸缩的搜索,模仿华为应用市场

    影响比较深刻的就有华为应用市场的搜索(同样,简书的搜索也是类似的)。 而今天,就是带你来实现华为应用市场那样的搜索。 我们先放上我们实现的效果图吧: demo效果图 怎么样,想不想学?...首先,在搜索还未打开时,先确定半径 R ,然后假设一变量 offset 用来动态改变搜索的宽度。...MeasureSpec.AT_MOST) { mHeight = Math.min(heightSize, mHeight); } } // 搜索小圆圈的半径...,然后是搜索图标,最后是搜索的提示文字。...画背景的时候,是需要根据搜索在左边还是右边的位置来确定值的。 而画图标的时候,是根据搜索关闭时那个圆的内切正方形作为 Rect 的。 最后画提示文字没什么好讲的了,都是定死的代码。

    54230

    quicktime player屏幕录制_电脑自带录屏怎么使用

    大家好,又见面了,是你们的朋友全栈君。 Mac电脑用自带软件QuickTime Player进行录屏的教程,几步就可以学会,挺简单的。   ...可以鼠标右键这个图标,选择“选项”-“在程序坞中保留”,这样,软件就固定在了Dock,方便以后打开软件。   2、启动软件后,屏幕顶部左上角出现“QuickTime Player”栏目。   ...4、这时,屏幕上将会出现一屏幕录制的窗口界面,我们点击里面红色的小圆圈。   5、随后,会弹出一有关屏幕录制的文字框:“点按以录制全屏幕。拖动以录制屏幕的一部分。...点按菜单的停止按钮以结束录制”。   6、在这个文字框中用鼠标点击一下,屏幕录制就正式开始了。同时,屏幕顶部会出现一黑色的圆形按钮,如下图所示。   ...7、屏幕录制开始以后,如果想结束录制,点击屏幕顶部靠右的小黑点,会弹出一视频播放界面。 ​​​​​​​

    1.8K20

    Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式

    Django自带有强大的后天管理系统,接下来就给大家介绍一下x的admin一些强大的操作及后台美化。...accordion" # 将菜单收起来 xadmin.site.register(views.CommAdminView,GlobalSettings) 将此代码写到任意一app的adminx.py...True xadmin.site.register(views.BaseAdminView, BaseSetting) 接下来我们就能对xadmin后台的主题进行修改了,在初始各功能模块默认是一小圆圈...,我们可以通过font-awesome设置我们想要的功能模块图标,下图就是设置完成的各功能模块的图标 ?...以上这篇Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式就是小编分享给大家的全部内容了,希望能给大家一参考。

    97510

    《Motion Design for iOS》(三十一)

    首先,当地图的图标被点击时,应用的主界面(包括导航)同时有不透明度和比例的动画来让其淡出到黑色的背景并且有一点点缩小。同时,地图伴随着不透明度和比例的动画显著地显现到界面的前面来。...地图还会向屏幕上方移动一点,就像过度动画一样。地图图标会保持在原位。 在我们编码重现Jeff的动画前,先看一眼我们创建的最终的动画效果。...这个视图被添加为类的@property了,这样我们就可以在之后的代码引用它。这里显示了如何声明一@porperty。...图片属性被设为“map-arrow”,这只是一地图图片,将其和一箭头放在一起,来模仿Jeff在他的动画中所涉及的样子。 一开始,这个视图会是完全透明的,所以alpha属性被设为0。...有两变换添加到视图中:第一将视图往下移动30像素,第二将其从正常尺寸拉伸到1.1倍。 这里是它现在看起来的样子,注视了alpha那一行,这样我们就可以看到地图在哪。

    67530

    一招彻底解决win10开机桌面及任务卡死问题

    大家好,又见面了,是你们的朋友全栈君。...问题描述: 从9月份开始,的笔记本(win10)隔三差五地出现开机后桌面和任务卡死的状况,具体表现为开机进入桌面后桌面图标点击无响应;把鼠标移动到桌面底部任务显示鼠标的小圆圈一直在加载,若此时多次点击任务则会导致资源管理器崩溃并重新启动...(未解决) 点击开始菜单,打开设置,选择“个性化”;切换到“开始”,将“在开始屏幕或任务的跳转列表显示最近打开的项”设置为关闭状态。...(未解决) 网友:“这个是微软有一关于天气的更新导致开机之后任务卡死,卸载更新就好了。”...(未解决) 有一可能是鼠标问题,新鼠标一直这样,开机就任务卡死,桌面卡死,重装了几次系统也没用。只要鼠标动一动,突然就卡死了。后面换个鼠标就好了。 (愈发离谱,这能信?)

    6.2K20

    18您想了解的微小但有用的macOS功能

    将分享18种使喜欢“ Aha!”的功能。最近。 1.为文件和文件夹创建自定义工具图标 您可能已经知道,可以将文件夹拖到Finder侧的“收藏夹”部分,以进行快速访问。...然后,您将拥有一新的自定义工具图标,该图标链接到该特定文件夹。 您无法通过自定义图标区分相同类型的不同文件夹或文件,因为这些图标是通用的。...4.跳回到搜索结果 在获取上面的屏幕截图时,偶然发现了另一功能:SnapBack。 当您单击Google之类的搜索结果的链接,然后从一网页跳至下一网页时,回到您的搜索结果是很痛苦的,对吧?...经过一些试验,发现当您通过搜索引擎的网页进行搜索而不是在Safari地址或智能搜索字段中键入查询时,就会发生这种情况。不过,该功能在DuckDuckGo。com上运行良好。...这是一种回旋处理方式,但是当您只想在Finder浏览隐藏的数据时,它很方便。 8.强制查找器中大小相等的列 像我这样的怪胎将对此功能表示感谢。

    6.1K30

    在VS Code里逛知乎、发文章?知乎 on VS Code来啦!重新定义内容创作!

    ⚡ Features 登录 二维码/账密登录 创作 内容创作 内容发布 一键上传图片 浏览 个性推荐 实时热榜 搜索全站 收藏夹 Reference 图标按钮 快捷键 登录 进入主页面,左侧最上方为个人中心...由于知乎服务端的限制,表格暂不支持,答案的表格会被服务端过滤。 内容发布 链接扫描 ? 若你想在特定的问题下回答,或想修改自己的某个原有回答,就将问题/答案链接以 #! https://......收藏夹 ➕ 添加收藏 不管是文章,答案,还是问题,在知乎页面顶的右侧,都会看到一粉色的星状图标: ? ➖ 查看收藏 收藏的内容会在左侧下方显示,插件会自动分类: ?...---- 图标按钮 点击左侧活动的知乎按钮,进入知乎插件页面,在推荐的上方可以看到三按钮,对应的命令分别为 Zhihu: Login(登录),Zhihu: Refresh(刷新), Zhihu: Search...最右侧的更多点开,可以看到 Zhihu: Logout (注销) 命令按钮: ? 在 Markdown 页面内,可以在编辑窗口的右上角看到两按钮: ?

    2.3K10

    竟然能在 VS Code 里逛知乎、发文章

    登录 进入主页面,左侧最上方为个人中心,点击登录图标,或使用 Ctrl + Shift + P 打开命令面板,搜索并执行 Zhihu: Login 命令。...由于知乎服务端的限制,表格暂不支持,答案的表格会被服务端过滤。 内容发布 链接扫描 ? 若你想在特定的问题下回答,或想修改自己的某个原有回答,就将问题/答案链接以 #! https://......收藏夹 ➕ 添加收藏 不管是文章,答案,还是问题,在知乎页面顶的右侧,都会看到一粉色的星状图标: ? ➖ 查看收藏 收藏的内容会在左侧下方显示,插件会自动分类: ?...图标按钮 点击左侧活动的知乎按钮,进入知乎插件页面,在推荐的上方可以看到三按钮,对应的命令分别为 Zhihu: Login(登录),Zhihu: Refresh(刷新), Zhihu: Search...最右侧的更多点开,可以看到 Zhihu: Logout (注销) 命令按钮: ? 在 Markdown 页面内,可以在编辑窗口的右上角看到两按钮: ?

    2.4K10

    手把手教你用上微信小程序,看完必懂!

    微信小程序正式发布已经接近 2 星期了,但是,还是有很多人不知道该如何使用小程序。 为什么用不了小程序?在哪里搜索小程序?几乎每一天,微信后台都会收到这类留言。...iOS 用户 打开微信,点击底部菜单最右侧的「」,点击「设置」,再点击「关于微信」。 这样,页面顶端就会显示你的微信版本信息。...这时,点击微信图标右侧的「更新」按钮,就能将微信更新到最新版本。 Android 用户 打开微信,点击底部菜单最右侧的「」,点击「设置」,再点击「关于微信」。...想在微信里搜索小程序,请按以下方式操作: iPhone 用户 主要有两种方式: 在微信首页的顶部搜索框,输入小程序的全称,点击搜索;接着,点击搜索页面最下方的「搜一搜」即可; 点击微信底部菜单的「发现...Android 用户 点击微信右上角的「放大镜」图标,输入小程序的全称,点击搜索;接着,点击搜索页面最下方的「搜一搜」即可。 值得注意的是,绝大部分小程序,都需要输入完整名称才能搜索得到。

    75120

    【PowerDesigner】创建和管理CDM之使用实体间关系

    创建和管理CDM ​​​​​​2.1 新建CDM 选择菜单File->New,打开New窗口 在左边模型类型(Model type)列表,选中Conceptual Data Model,单击“确认...在CDM中用穿过联系线的一条短直线表示强制,用联系线上的一小圆圈表示可选 上图表达了两含义:其一是一用户必须归属于且只能归属于一客户;其二是一客户可以有多个用户,也可以一用户都没有。...子类可以只继承父类的主键,也可以继承所有的字段,可通过继承属性页面进程设置,双击新建的继承关系线,打开继承关系属性窗口,切换到Genaration标签页,调整红色椭圆标注区域的单选框的选择即可 继承关系线上的半球形图标里是否有叉叉图标...研究心得 深入理解CDM(概念数据模型)创建的基本步骤: 通过本次学习,深入了解了如何在PowerDesigner创建概念数据模型(CDM)。...掌握实体间关系的定义与管理: 学习过程重点掌握了在CDM定义和管理实体间关系的方法。

    20510

    玩转Github —— Octotree Chrome插件

    那既然开源,肯定会经常浏览GitHub的项目(Gitee用的少,不予置评),Github的内容量还是很丰富的,涵盖了所有的知识面,但是也有一些弊端,毕竟我们不可能每个项目都下载或者Clone下来,经常会在...01 唤起目录 修改个性主题 调整展示布局 Chrome应用店搜索Octotree: 可以看到用户量还是很多的,安装好后,随便打开一Github项目,比如我们的老伙伴——Blog.Core,就可以看到布局了...除了文件,整个项目也可以进行标记,如果有一天你看到了一不错的项目,又不想Star或者Fork,又怕以后找不到,就可以点击左上角的书签图标,添加到标签里: 然后就可以在工具里找到具体的项目了。...03 快速搜索 精准定位 Shift+S事件 在之前,如果你想在任意一项目中,寻找一文件,需要用官方的Go to file功能,还不是很好用,来看看Octotree插件的功能: 可以点击工具的放大镜图标...,但是是md翻译以后的效果,如果快速的查看源文件呢,可以直接点击“打开”小图标: 总体来说,十分钟内就已经发现了这么些好用的功能了,肯定还有其他功能,期待你的发掘哟,奥里给。

    63610

    结构建模设计——Solidworks软件之特征成型异形孔向导和线性阵列功能实战总结

    1)先画一矩形板和三角形板 ——点击草图,草图绘制,在上视基准面上绘制一中心矩形和三角形 ——标注尺寸,矩形长度100,三角形两直角边长度也是100,两图形间距30 ——拉伸凸台基体,距离30,...得到矩形板和三角形板 2)异形孔向导 ——点击特征的异形孔向导,属性可见9孔类型图标(可通过图标了解孔的外形) ——在矩形板上画一柱形圆柱孔,标准选GB,类型选内六角圆柱头螺钉,孔大小可选...——点击特征线性阵列图标的三角形按钮,弹出菜单可见8种阵列,其中常用的是前三:线性阵列、圆周阵列、镜像。 1)线性阵列 ——点击线性阵列,属性中有方向1,方向2,以及需要阵列的一些特征选项。...注意,以上零件是分两部分的,左边一矩形板,右边一三角板,他们之间并不相连,在Solidworks,不连续的两部分称为不同的两实体,在设计树中找到实体,点击旁边三角形按钮,可见有两实体(之前说的草图中的裁剪实体...3 总结         原来没接触过Solidworks时,还觉得设计一螺纹孔还是挺复杂的事,现在接触后觉着也没那么复杂了,直接通过异形孔向导就可以完成大多数打孔的设计需求,另外阵列的功能也很实用

    1.9K10

    TextView自定义下划线、点击弹框

    然后就是在onDraw方法对计算出的行进行逐行绘制,在最后一行的结束位置绘制笔记图标小圆圈)。...在TextView的onTouchEvent判断按下位置是否是笔记图标小圆圈)的附近,是的话则弹框(PopupWindow)显示。...我们先定义一实体类,这个类存放每行的索引,和对应每行上的一开始位置索引,结束位置索引。 ? 定义两集合,分别存放所有行的信息和需要绘制的行的信息。 接下来开始计算: ?...思路是这样的: 循环所有行; 如果要绘制的开始位置在这行,并且结束位置也在这行,直接向要绘制的集合添加一对象,终止循环; 如果开始位置在这行,但结束位置不在这行,则添加一结束位置是本行结束位置的对象到要绘制的集中...08 — 图标点击 ? 在上一步绘制小图标时,就将图标的x和y值保存,在onTouchEvent,判断按下的位置是否在小图标位置的“附近”,是的话就弹框显示笔记内容。

    1.5K30

    VS Code settings.json 10 高(装)阶(杯)配置!

    隐藏活动 VS Code 左侧图标列表是“活动”,我们可以点击图标跳转到各个模块,我们可以通过配置 workbench.activityBar.visible 来控制活动的显示; 如果你想恢复显示...Ctrl+Shift+P 搜索,不过使用快捷键就更有装杯效果~ 活动在隐藏状态下,我们也可以通过快捷键跳转到不同的工作空间,比如 Ctrl+Shift+E(跳转到文件资源管理器)、Ctrl+Shift...+X(跳转到扩展)、Ctrl+Shift+H(搜索和替换)等 2....这个非常强大,出了 fixAll,还能 addMissingImports 补充缺少的 Imports,或者其它你想在保存后执行的行为; 这个配置就像是编程魔法~ 7....单击打开文件 VS Code 默认用户界面,有奇怪的现象,它需要双击才能从文件资源管理器打开文件。 单击一下得到的是奇怪的“预览”模式,当你单击下一文件时,第一文件就会消失。

    1.1K30
    领券