input中加入图片的做法

最新推荐文章于 2024-07-25 10:33:27 发布

业余草

最新推荐文章于 2024-07-25 10:33:27 发布

阅读量6.1w

点赞数 14

分类专栏： html5 Java面试题大全文章标签： html5 input图标登录页面设计手机登录页面文本框图标

本文链接：https://blog.csdn.net/xmtblog/article/details/48085345

版权

Java面试题大全同时被 2 个专栏收录

20 篇文章 6 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

html5

43 篇文章 1 订阅

订阅专栏

本文介绍如何在登录页面的input文本框中添加图标，提升界面美观度。以手机登录页面为例，展示实际效果，并提供相关代码示例。

摘要由CSDN通过智能技术生成

有很多高大上的网站中都有这一做法。尤其是在登录页面，输入用户名和密码时加入小图标，看起来简单舒服。

下面就列举一下我们公司中手机网站应用的截图：

怎么样看起来还不错吧。下面直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<title>input中加入图片的做法</title>
		<!-- 这里图片用的是base64的做法，避免大家在使用我的demo的时候没有对应的图标 -->
		<style>
			.username {width:130px; background:#FFFFFF url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANfSURBVDhPRZRNaFxlFIa7dSuICzcuXERRKkh37uxGUGNB3KSCUqUIkaItVtDQpqUMlSYWUxo1qaYGbTRg1VItjS6sNGjF1CZVM5m/O/fOvfN77/xl/jPz+H63URcfd7jzneec857

了解本专栏