简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

The most simple search box with icons

php中世界最好的语言
Release： 2018-03-08 11:29:30
Original
1845 people have browsed it

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>
Copy after login

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!

Related labels：
search Target Introduction
source：php.cn
Previous article：Simple image click upload function Next article：How to quickly save the content of a web page and remove unwanted elements
Statement of this Website
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
Latest Articles by Author
Latest Issues
Catching Guzzle exceptions I'm trying to catch exceptions in a set of tests running on an API I'm developing, and I'm...
From 2023-11-16 14:36:03
0
12
290
TYPO3 V11: "PHP warning: undefined array key", $this->request->getArguments() is empty I'm a new user of typo3, I made a plugin to show users and use the search bar to filter th...
From 2023-11-12 21:35:09
0
1
362
Implement filters and pagination using Laravel Eloquent I'm trying to create an API that will return all customer records from a database. But thi...
From 2023-11-12 18:42:35
0
1
310
Retrieve MySql rows with the same column value Let us consider the following table - IDScore19521003884100573 I am a complete SQL noob, b...
From 2023-11-10 21:53:39
0
2
331
Composer update gives error phpunit/phpunit I recently installed php (8.1.7) and composer (2.3.7) with laravel9; now I am getting this...
From 2023-11-08 15:34:22
0
1
309
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！