Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > HTML Tutorial > body text

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

WBOY

Release： 2016-06-24 12:05:49

Original

2531 people have browsed it

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!

Related labels：

small icon style Login enter

source：php.cn

Previous article：CSS implementation of a description text when the mouse slides over the text, no JS code_html/css_WEB-ITnose Next article：I've been troubled for a long time, and I hope to solve the spacing problem of -tr_html/css_WEB-ITnose

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