search
HomeWeb Front-endJS TutorialThe most simple search box with icons
The most simple search box with iconsMar 08, 2018 am 11:29 AM
searchTargetIntroduction

This time I will bring you the most brief search box with icons. What are the precautions when making a search box with icons? The following is a practical case, let’s take a look.

The most brief search box with icons

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        form>input[type="search"]{
            height: 50px;
            padding: 10px;
            padding-left: 50px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAAlElEQVR42oWQQRHEIAxF10ElVAISVgo3bCABCUhYCZWAhEpAQpoD6bzJhNnDO0DyyA8fEXkppXyVCpLViDUfyqVIQN9JFMY637hrlCySFauL21E7KVWbAIGx56rnSLqc5KPXSLo3kySalPhTygFhRDtFC09EIsMeZJSGBj7Qveh3OJW89syImiH%2BIO2BOJX0XwA2%2BQEL4pAhSX4aBQAAAABJRU5ErkJggg%3D%3D);
            background-repeat: no-repeat;
            background-size: 30px 30px;
            background-position:10px ;
            font-size: 20px;
            border: 1px #989898 solid;
        }
    </style>
</head>
<body>
    <form >
        <input type="search" />
    </form>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

Simple image click upload function

Can JS capture the tagged video thumbnail of a video?

The above is the detailed content of The most simple search box with icons. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
如何利用PHP函数进行搜索和过滤数据?如何利用PHP函数进行搜索和过滤数据?Jul 24, 2023 am 08:01 AM

如何利用PHP函数进行搜索和过滤数据?在使用PHP进行开发的过程中,经常需要对数据进行搜索和过滤。PHP提供了丰富的函数和方法来帮助我们实现这些操作。本文将介绍一些常用的PHP函数和技巧,帮助你高效地进行数据的搜索和过滤。字符串搜索PHP中常用的字符串搜索函数是strpos()和strstr()。strpos()用于查找字符串中某个子串的位置,如果存在,则返

Laravel开发:如何使用Laravel Scout实现全文搜索?Laravel开发:如何使用Laravel Scout实现全文搜索?Jun 14, 2023 am 10:14 AM

Laravel开发:如何使用LaravelScout实现全文搜索?LaravelScout是一个Laravel的全文搜索解决方案,它是一个流行的开源软件,它可以让开发者轻松地实现高效的全文搜索功能。在这篇文章中,我们将介绍如何使用LaravelScout来实现全文搜索功能。安装LaravelScout首先,我们需要安装LaravelScout。可以

PHP如何对接淘宝商品搜索API文档PHP如何对接淘宝商品搜索API文档Jul 01, 2023 pm 10:16 PM

PHP如何对接淘宝商品搜索API文档淘宝是中国最大的电子商务平台之一,拥有庞大的商品库存和用户群体。对于开发者来说,通过对接淘宝的API接口,可以获取商品信息、推广活动以及进行交易等功能,从而实现个性化的商业应用。本文将介绍如何使用PHP语言对接淘宝商品搜索API,帮助开发者快速构建自己的电商应用。第一步:注册成为淘宝开发者在开始之前,需要先注册成为淘宝开发

如何使用PHP ZipArchive实现对压缩包的文件过滤和搜索?如何使用PHP ZipArchive实现对压缩包的文件过滤和搜索?Jul 23, 2023 pm 08:34 PM

如何使用PHPZipArchive实现对压缩包的文件过滤和搜索?概述在Web开发中,我们经常需要对压缩包文件进行处理,包括过滤和搜索。PHP提供了ZipArchive扩展,它使我们能够轻松地对压缩包进行操作。本文将教您如何使用PHPZipArchive扩展来实现对压缩包文件的过滤和搜索功能。步骤首先,确保您的PHP环境已启用ZipArchive扩展。您可

如何在uniapp中实现关键字搜索如何在uniapp中实现关键字搜索Jul 05, 2023 am 08:53 AM

如何在uniapp中实现关键字搜索在当前信息爆炸的时代,搜索已经成为我们获取所需信息的重要方法之一。在移动端应用开发中,如何在uniapp中实现关键字搜索,提供用户便捷的搜索功能,是一个非常重要的技术挑战。本文将介绍在uniapp中实现关键字搜索的方法,并提供代码示例供参考。一、创建搜索框组件首先,我们需要在uniapp中创建一个搜索框组件,用于用户输入关键

UniApp实现搜索功能的配置与实现技巧UniApp实现搜索功能的配置与实现技巧Jul 04, 2023 pm 05:15 PM

UniApp实现搜索功能的配置与实现技巧随着移动互联网的迅速发展,搜索功能已经成为了几乎每一个应用都必备的功能之一。而对于基于Vue.js的多平台应用开发框架UniApp来说,实现搜索功能也变得更加简单和高效。本文将介绍UniApp中搜索功能的配置与实现技巧,并且附带代码示例,帮助读者快速上手。一、配置搜索功能在uni-app项目的页面文件夹中创建一个搜索页

如何在Java后端功能开发中实现搜索功能?如何在Java后端功能开发中实现搜索功能?Aug 05, 2023 am 11:09 AM

如何在Java后端功能开发中实现搜索功能?搜索功能是现代应用程序中必不可少的一个重要功能。无论是在电商平台中搜索商品,还是在社交媒体中搜索朋友,搜索功能都为用户提供了便捷和高效的信息获取方式。在Java后端开发中,我们可以利用各种技术和库来实现搜索功能。本文将介绍一种常用的实现搜索功能的方法,并以Java语言为例给出代码示例。在Java后端开发中,我们通常会

在Go语言中使用Elasticsearch实现高效的搜索在Go语言中使用Elasticsearch实现高效的搜索Jun 15, 2023 pm 09:01 PM

随着大数据时代的到来,数据的存储和检索已经成为了我们面临的一个重要问题。Elasticsearch是一个开源的分布式实时搜索和分析引擎,它可以通过快速反向索引来搜索大量的数据,提供了高效的全文搜索、聚合分析、实时监控、自动补全和数据可视化等功能,在实际的应用场景中有着广泛的应用。同时,Go语言作为一门快速、静态类型的编程语言,也广泛应用于后端服务开发中。在

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),