LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

[点晴永久免费OA]input输入框添加内部图标

admin
2023年5月17日 19:7 本文热度 470

有可能在制作网页的过程中遇到各种美化表单设计,这次我们来试着做一个demo,将input输入框添加内部图标。


话不多说,看一下最终效果:


我们的思路是,在一个div中,加入一个div和一个input标签,小div在左侧,input放右侧,用box-sizing:border-box,这句代码代表的是这个:怪异盒子模型 => 盒子定长定宽,不管有没有padding,border,margin,始终就是这么大,影响的只会是里面的元素。


左侧的div给border,也要给border-radius,右边的input只给右边的border,不给border-radius,input里面padding-left最好设置一下,更加美观。


总体思路其实是把大的div做成让人感觉像是一个input,如果能做到,那么你就成功了。


下面附代码:

<div class="student-name-box">
  <div>
    <img src="./img/学号.png" />
  </div>
  <input type="text" value="" placeholder="请输入学号" />
</div>
<div class="student-id-box">
  <div>
    <img src="./img/密码.png" />
  </div>
  <input type="password" placeholder="请输入密码" />
</div>


CSS:

.student-name-box,.student-id-box{
  box-sizing: border-box;
  width:300px;
  height:36px;
  border: 2px solid #DDD;
  border-radius: 5px;
  margin-top: 27px;
  margin-left: 50%;
  transform: translateX(-50%);
}
input{
  box-sizing: border-box;
  margin-bottom: 1px;
  outline: none;
  width:264px;
  height:32px;
  padding-left: 10px;
  border:;
}
.student-name-box div:first-child
  ,.student-id-box div:first-child{
  box-sizing: border-box;
  float: left;
  width: 32px;
  height: 32px;
  background: rgb(233,236,239);
  background-position:8px 10px;
  border-right: 2px solid #DDD;
}
.student-name-box img,.student-id-box img{
  width: 16px;
  height: 16px;
  margin:8px;
}

该文章在 2023/5/17 19:09:04 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved