登陆界面输入框内加入小图标的样式

最新推荐文章于 2023-01-04 23:01:07 发布

转载最新推荐文章于 2023-01-04 23:01:07 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wanzhongjun/p/6813806.html

文章标签：

#javascript #xhtml #ui #ViewUI

本文介绍了如何使用HTML和CSS创建具有图标背景的输入框，包括具体的代码实现和样式调整方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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;
}
这样也好简单的。。。

-----------------------------------------------------------------------------------------------------------------------

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