input内的搜索icon图片怎么添加

最新推荐文章于 2024-06-18 17:03:40 发布

丢失的林夕

最新推荐文章于 2024-06-18 17:03:40 发布

阅读量4.3k

点赞数 3

文章标签：带icon的搜索框

本文链接：https://blog.csdn.net/weixin_41217541/article/details/98337518

版权

使用背景图片+padding-left（推荐）

.search-input {
    border: 1px solid #a3a3a3;
    width: 120px;
    padding-left: 30px;
    height: 28px;
    border-radius: 2px;
    background: url(../images/icon-search.png) no-repeat 10px center/16px;
}

使用块元素拼接

在这里插入图片描述
左右两个div
给两个div设置它特定边框的样式，病给第一个div一个img，或者背景图片

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

丢失的林夕

关注关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

实现带Icon的Input登录框布局

Fimooo的博客

04-02

3359

带Icon的Input登录框布局效果思路细节问题如何将icon放入input？如何在input聚焦前后，精准完成嵌套如何制作圆角如果遇到了对齐的问题input聚焦后，修改div-icon样式实现效果思路基本思路细节问题如何将icon放入input？ ——position:relative\absolute 注意position:relative脱离文档流，但是其本身的位置是在文档中占...

input中加入搜索图标

weixin_30292843的博客

09-30

3079

1. HTML代码： <div class="box"> <label for="q" id="q_label">请输入关键字</label> <input id="q" type="text"> <i class="am-icon-search search" id="q_i"></...

参与评论您还未登录，请先登录后发表或查看评论

search icon（搜索图标）

12-28

使用css3的after特性进行search icon

如何在input输入框中加一个搜索的小图片_仿淘宝搜索栏

weixin_39716043的博客

11-20

2251

1.写入元素内容结构 <form > <input name="keyword" type="text"/> <span> <input type="image" src="./camera.png" alt="Submit" /> <input type="submit" value="搜索"/&gt...

input框中放置图标

最新发布

WUXIANJINBU的博客

06-18

1051

【代码】input框中放置图标。

带搜索图标的input

Ybittersweet的博客

03-31

1038

【代码】带搜索图标的input。

AntDesign-Vue登录页中密文切换且带前缀icon的a-input

前端-尔嵘

10-26

3033

<a-form-item> <a-input size="large" placeholder="请输入密码" autocomplete="autocomplete" :type="passwordType" v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]" .

JS Input里添加小图标的两种方法

10-19

在网页设计中，为了提升用户体验和界面美观度，经常会在`<input>`元素中添加小图标，例如搜索图标、提示图标等。本文将详细介绍两种在JS中为`<input>`添加小图标的常见方法。 ### 方法一：背景图片法这种方法是...

JS组件系列之Bootstrap Icon图标选择组件

10-22

此外，Bootstrap Icon图标选择组件支持自定义图标的添加，开发者可以添加自己的图标，或者使用背景图片作为图标。通过修改组件的源代码，可以轻松地添加新的图标到选择器中，而无需修改底层的实现逻辑。这对于需要...

python图标icon_【Python】站长之家icon图标爬虫

weixin_39537298的博客

12-10

1063

本帖最后由 lihaisanhui 于 2020-3-16 15:50 编辑说明：我又来了！！！这次写的是站长之家的icon图标爬虫这是一个坛友定做，我花了1上午赶工出来的，写的不好勿喷！数据源：http://sc.chinaz.com/tubiao/index.html第一版只能爬icon图标，下一个版本会支持站长之家所有图片素材下载！使用方法：输入要爬取的页数，然后等待。。。截图：提醒：下载目...

Icon图标处理工具

05-18

由于VB的Icon只支持256色的，所以我们一般需要在网上找的Icon都无法直接使用。该工具可以快速处理Icon图标，还有其它很多处理图片的功能哦。

Input搜索框与搜索图标对齐解决方法

BambooStrip的博客

08-19

2195

搜索框对齐解决方案

input标签中添加一个图标

githubcurry

11-27

9372

在input标签中添加一个icon图标基本可以分为两种 1.将icon图标存储为本地图片，然后设置为input的背景图，然后通过background-position来调整图标在输入框的位置 2.使用一个div包裹两个子div，其中第一个div里面包裹icon图标，另一个div包裹input标签，并设置input的border为none，然后让input标签撑满div，设置div的border，然后使用flex布局使两个子div成行排列，并让两个div撑满父div（height，width）第一种实现方

input中加入图标实现搜索框

醉卧雕龙舫，的博客

03-31

2287

效果 Html+css： <div style="margin-left: 5%;margin-right:5%;background: #ffffff;padding-left: 17px;border: 1px solid #dedede;border-radius: 17px;height: 32px"> <label for="keyword" id="keyword_label" style="z-index: 2;position: absolute;left

html、css做一个带搜索图标的搜索框（方法分享）

热门推荐

Blank

10-07

3万+

html、css做一个带搜索图标的搜索框

前端学习（3334）：ant design中加入icon

歌谣的博客

09-16

244

搜索框input 和图标结合实现的几种思路

小菜鸡程序媛的挣扎史

07-24

2493

一、淘宝外层div作出框效果内层input没框搜索icon用position定位到左边右边直接接一个div放相机icon 搜索框是接一个button 二、花瓣 input自己的框外层form不设置宽高，通过 display: inline-block; position: relative; 搜索icon用position定位三、百度和...

点击按钮，按钮变输入框或输入框输入内容后，出现确认的图标 antd-design-vue

花椒和蕊的博客

08-05

1504

经历了上周比较痛苦的一周，遇到的点都记录下来，温故而知新 1、点击按钮，按钮变输入框使用labelFlag变量来控制 <a-button class="left_content_button" v-if="labelFlag" size="large" @click="changeInput">创建新标签</a-button> <a-input class="left_content_input" v-else v-model="createPutv

在搜索栏中如何放入图片

07-13

要在搜索栏中放置图片，可以使用HTML和CSS来实现。以下是一个示例代码： ```html <form action="/search" method="get" class="search-form"> <img src="path_to_image.jpg" alt="搜索图标" class="search-icon"> <input type="text" name="query" placeholder="输入搜索内容" class="search-input"> <button type="submit" class="search-button">搜索</button> </form> ``` 在上面的代码中，我们使用了一个 `img` 标签来插入图片，将其放在搜索栏的前面。你需要将 `src` 属性的值替换为你的图片路径，并通过 `alt` 属性提供一个可选的替代文本。为了对搜索栏进行布局和样式调整，我们给表单元素添加了一些类名。你可以在CSS中定义这些类名的样式规则来控制搜索图标、输入框和按钮的样式。以下是一个简单的CSS示例： ```css .search-form { display: flex; align-items: center; } .search-icon { width: 20px; height: 20px; margin-right: 5px; } .search-input { padding: 5px; border: 1px solid #ccc; } .search-button { padding: 5px 10px; background-color: #f1f1f1; border: none; } ``` 在上面的CSS代码中，我们使用了一些常见的样式规则来设置搜索栏的布局和外观。你可以根据需要进行调整和扩展。通过这种方式，你可以在搜索栏中放置图片，并根据自己的需求进行样式定制。记得将图片路径替换为实际的图片路径，并根据需要修改CSS样式规则。