yu8118 2022-10-29 19:33 采纳率: 50%
浏览 62
已结题

CSS登陆框问题,请教下应该怎么修改

问题遇到的现象和发生背景

img

正常显示是这样的

用代码块功能插入代码,请勿粘贴截图

.fm-item{width:90%; margin: 0 auto; margin-bottom: 18px;}


#o-box-up { background-color:#fff; filter:alpha(opacity:50); opacity:0.5;}



.fm-item input{width:90%; margin-left: 5%; line-height:34px;  border:1px solid #e9e6da;  background:#f4f4f4;  color:#999; font-size:15px; text-indent:1em;}



#username{ background:url(images/username.png) no-repeat left #fff; text-indent:2em;}
#password{ background:url(images/password.png) no-repeat left #fff; text-indent:2em;}


.yzm{ width: 90%; overflow: hidden;}
.yzm input{ width:50%!important; float: left; margin-right: 10px;}

.remember{width:90%; color: #0ea6fc;}
.remember input{ width:18px; height:18px; line-height:18px;}
.remember p{margin-left:5px; font-size:14px; line-height:16px;}

<div class="fm-item">
       <input type="text" placeholder="请输入账号" maxlength="100" id="username"  name="username">    
  </div>
  
  <div class="fm-item">
       <input type="password" placeholder="请输入密码" maxlength="100" id="password" name="pwd">    
  </div>

运行结果及报错内容

img

我想要达到的结果

怎么能控制和第一图一样,现点击输入框后如原有记录会自动有显示,并复盖了输入框的左侧小图标,怎么才能在输入框的左侧依旧保持小图标。和最上面的那张图圈圈的状态一样 ,没有记录不会下拉显示时是正常的

img

终于可以了,解决好了。。

  • 写回答

2条回答 默认 最新

  • 经海路大白狗 前端领域优质创作者 2022-10-29 22:58
    关注

    你这么做明显是有问题的啊,肯定要把图标icon弄没的
    在Input输入框外层套一个div,
    然后里面除了有input之外,再加一个图片元素,给图片元素设定浮动或者绝对定位,使其固定于左侧,这样输入框的浏览器默认行为,就不会影响到小图标标标标了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 11月4日
  • 已采纳回答 11月3日
  • 修改了问题 11月1日
  • 创建了问题 10月29日

悬赏问题

  • ¥30 关于#c++#的问题,请各位专家解答!
  • ¥15 App的会员连续扣费
  • ¥15 不同数据类型的特征融合应该怎么做
  • ¥15 用proteus软件设计一个基于8086微处理器的简易温度计
  • ¥15 用联想小新14Pro
  • ¥15 multisim中关于74ls192n和DSWPK开关仿真图分析(减法计数器)
  • ¥15 w3wp,exe 中发生未处理的 Microsoft ,NETFramework 异常。
  • ¥20 C51单片机程序及仿真(加减器)
  • ¥15 AQWA | 水动力分析 二阶波浪力
  • ¥15 c语言题目:成绩管理系统