input输入框添加内部图标

最新推荐文章于 2024-10-04 11:04:16 发布

Mr.Gu

最新推荐文章于 2024-10-04 11:04:16 发布

阅读量1.2w

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/JobsOfferings/p/JonsOfferings_input_icon.html

本文详细介绍了如何在网页设计中为输入框添加内部图标，通过使用HTML和CSS实现美观的表单设计。文章提供了具体代码示例，展示了如何布局div和input元素，以及如何设置border和padding等属性来优化视觉效果。

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

有可能在制作网页的过程中遇到各种美化表单设计，这次我们来试着做一个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，如果能做到，那么你就成功了。下面附代码

 1 <div class="student-name-box">
 2 <div>
 3 <img src="./img/学号.png" />
 4 </div>
 5 <input type="text" value="" placeholder="请输入学号" />
 6 </div>
 7 <div class="student-id-box">
 8 <div>
 9 <img src="./img/密码.png" />
10 </div>
11 <input type="password" placeholder="请输入密码" />
12 </div>

 1 .student-name-box,.student-id-box{
 2 box-sizing: border-box;
 3 width:300px;
 4 height:36px;
 5 border: 2px solid #DDD;
 6 border-radius: 5px;
 7 margin-top: 27px;
 8 margin-left: 50%;
 9 transform: translateX(-50%);
10 }
11 input{
12 box-sizing: border-box;
13 margin-bottom: 1px;
14 outline: none;
15 width:264px;
16 height:32px;
17 padding-left: 10px;
18 border:0;
19 }
20 .student-name-box div:first-child
21 ,.student-id-box div:first-child{
22 box-sizing: border-box;
23 float: left;
24 width: 32px;
25 height: 32px;
26 background: rgb(233,236,239);
27 background-position:8px 10px;
28 border-right: 2px solid #DDD;
29 }
30 .student-name-box img,.student-id-box img{
31 width: 16px;
32 height: 16px;
33 margin:8px;
34 }