登陆界面输入框内加入小图标的样式怎么写？

zhlin508 2014-04-22 10:48:15

在登陆界面的输入框左边加一个小图标，如图，css样式应该怎么写？

...全文

27027 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_15780417 2015-10-10

打赏
举报

<input type="text" class="inputAttr1" name="activityUserValue" for="reservation" placeholder="注册邮箱/用户名"/>
.inputAttr1{
background: url("../images/user_icon.png")no-repeat 315px ;
width: 350px;
height: 40px;
border-radius:5px;
border: 1px solid #999999;
box-shadow: 1px 1px 3px #cccccc;
padding-left: 10px;
margin-right: 10px;
}
这样也好简单的。。。

fdsaer 2015-05-28

打赏
举报

原来是这样，学习了

zhlin508 2014-04-22

打赏
举报

正是我要的效果，很感谢！

人生难得一只鸡 2014-04-22

打赏
举报

如下

<!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>

仿2013QQ登录框的账号栏，下拉带头像，删除按钮。

qq登陆框个性设计，全手工制作。包含教程和软件。

仿知乎登录界面的风格，蓝色背景，渐变效果。

<inputtype="text"class="inputAttr1"name="activityUserValue"for="reservation"placeholder="注册邮箱/用户名"/> .inputAttr1{ background:url("../images/user_icon.png")no-repeat315px; w...

话不多说，上代码 css 部分 @font-face { font-family: 'iconfont'; src: url('../font/iconfont.ttf?t=1621825600445') format('truetype'); } iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smooth...