Table of Contents
Reply to the discussion (solution)
Home Web Front-end HTML Tutorial How to write the style of adding small icons to the input box on the login interface? _html/css_WEB-ITnose

How to write the style of adding small icons to the input box on the login interface? _html/css_WEB-ITnose

Jun 24, 2016 pm 12:05 PM
small icon style Login enter


Add a small icon to the left of the input box on the login interface, as shown in the picture. How should the css style be written?


Reply to the discussion (solution)

as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>.text{border:solid 2px #ccc;width:400px;height:40px;background:url(http://d.lanrentuku.com/down/png/1211/blueberry/user_friend.png) no-repeat 0 center;}.text input{float:left;border:none;background:none;height:40px;line-height:30px;width:100%; text-indent:32px;}</style></head><body><div class="text">	<input type="text"/></div></body></html>
Copy after login

Exactly what I want, thank you very much!

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

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 ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Disabling Win11 Input Experience Guide Disabling Win11 Input Experience Guide Dec 27, 2023 am 11:07 AM

Recently, many Win11 users have encountered the problem that the input experience dialog box always flickers and cannot be turned off. This is actually caused by the default system services and components of Win11. We need to disable the relevant services first, and then disable the input experience service. Solved, let’s try it out together. How to turn off the input experience in win11: First step, right-click the start menu and open "Task Manager". Second step, find the three processes "CTF Loader", "MicrosoftIME" and "Service Host: Textinput Management Service" in order, right-click "End Task" "The third step, open the start menu, search and open "Services" at the top. The fourth step, find "Textinp" in it

PlayStation network login fails, but internet connection succeeds PlayStation network login fails, but internet connection succeeds Feb 19, 2024 pm 11:33 PM

Some players are experiencing a strange issue on PS4 or PS5 at launch. For example, this can cause distress when their PlayStation Network login fails, but their internet connection is fine. You may encounter errors when entering your login information and may not be able to join PSParty chat. If you encounter a similar problem, this guide may help you solve it. Next to PlayStationNetworkSign-in, you will see the error message ‘AnErrorHaveAreAre’ and it will say ‘Failure’. Other parameters like getting IP address, internet connection and connection speed were successful. So, what could be the problem here? I will give you a job

Fix AADSTS7000112, Application is disabled Microsoft account login error Fix AADSTS7000112, Application is disabled Microsoft account login error Feb 19, 2024 pm 06:27 PM

The AADSTS7000112 error may prevent you from logging into the app using your Microsoft account, causing you inconvenience. This article will provide you with solutions to help you resolve this issue and restore a normal login experience. Login: Sorry, you are having trouble logging in. AADSTS7000112: Application disabled. Fortunately, you can fix the error by following some simple suggestions. What is error code AADSTS7000112? Error code AADSTS7000112 indicates a problem with the connection to Microsoft's Azure Active Directory. Typically, this may be due to the Microsoft application trying to log in being blocked.

Windows input encounters hang or high memory usage [Fix] Windows input encounters hang or high memory usage [Fix] Feb 19, 2024 pm 10:48 PM

The Windows input experience is a key system service responsible for processing user input from various human interface devices. It starts automatically at system startup and runs in the background. However, sometimes this service may automatically hang or occupy too much memory, resulting in reduced system performance. Therefore, it is crucial to monitor and manage this process in a timely manner to ensure system efficiency and stability. In this article, we will share how to fix issues where the Windows input experience hangs or causes high memory usage. The Windows Input Experience Service does not have a user interface, but it is closely related to handling basic system tasks and functions related to input devices. Its role is to help the Windows system understand every input entered by the user.

macOS: How to change the color of desktop widgets macOS: How to change the color of desktop widgets Oct 07, 2023 am 08:17 AM

In macOS Sonoma, widgets don't have to be hidden off-screen or forgotten in the Notification Center panel like they did in previous versions of Apple's macOS. Instead, they can be placed directly on your Mac’s desktop – they’re also interactive. When not in use, macOS desktop widgets fade into the background in a monochrome style, reducing distractions and allowing you to focus on the task at hand in the active application or window. However, when you click on the desktop, they return to full color. If you prefer a drab look and want to retain that aspect of uniformity on your desktop, there's a way to make it permanent. The following steps demonstrate how it is done. Open the System Settings app

GeForce Experience login freezes [Fix] GeForce Experience login freezes [Fix] Mar 19, 2024 pm 06:30 PM

This article will guide you to solve the GeForceExperience login crash issue on Windows 11/10. Typically, this can be caused by unstable network connections, corrupted DNS cache, outdated or corrupted graphics card drivers, etc. Fix GeForceExperience Login Black Screen Before starting, make sure to restart your internet connection and computer. Sometimes, the problem may just be due to a temporary issue. If you are still experiencing NVIDIA GeForce Experience login black screen issue, please consider taking the following suggestions: Check your internet connection Switch to another internet connection Disable your

How to solve the problem of too frequent login operations on Wegame? How to solve the problem of too frequent login operations on Wegame? Mar 14, 2024 pm 07:40 PM

Wegame is a software used with Tencent games. You can use it to start games and gain acceleration. Recently, many users have experienced prompts that login operations are too frequent when using it. Faced with this prompt, many users do not know How can we solve it successfully? In this software tutorial, we will share the solution with you. Let’s learn about it together. What should I do if Wegame login operations are too frequent? Method 1: 1. First, make sure our network connection is normal. (You can try opening the browser to see if you can access the Internet) 2. If it is a network failure, then try restarting the router, reconnecting the network cable, and restarting the computer to solve the problem. Method 2: 1. If there is no problem with the network, then select &

How to log in to corporate WeChat email How to log in to corporate WeChat email Mar 10, 2024 pm 12:43 PM

How to log in to the email address of Enterprise WeChat? You can log in to the email address in the Enterprise WeChat APP, but most users don’t know how to log in to the email address. Next is the graphic tutorial on how to log in to the email address of Enterprise WeChat brought by the editor for interested users. Come and take a look! Enterprise WeChat usage tutorial How to log in to the Enterprise WeChat email 1. First open the Enterprise WeChat APP, go to the [Workbench] at the bottom of the main page and click to come to the special area; 2. Then in the workbench area, select the [Enterprise Mailbox] service; 3. Then jump to the corporate email function page, click [Bind] or [Change Email] at the bottom; 4. Finally, enter [QQ Account] and [Password] on the page shown below to log in to the email.

See all articles