自定义表单input

我想实现下面这个效果？应该怎么写最方便呢？最有效，兼容性最好呢

 

我使用<p>标签套lable，加input的组合，p标签绝对定位，input标签铺满，用padding填充。

 

 

主要css

.lg-input{position: relative; font-size: 16px;}

.lg-input p{position:absolute;display: inline-block;padding-left: 20px;line-height: 40px; color: #90a3be; font-family: "微软雅黑";}

.lg-input input{width: 260px;height: 40px;line-height: 40px;box-sizing:border-box;border: 1px solid #8fc1ed;    padding-left: 75px;}

.lg-input input:focus{outline:1px solid #8fc1ed;/*border: 1px solid #8fc1ed; border-radius: 2px;*/}

就是这么简单，我却纠结了一天，再次谢谢师父引领我自己一步一步思考去解决问题。还提醒我要把这个记下来，知道我记性不好，真是太贴心了！

转载于:https://www.cnblogs.com/wufangfang/p/5293140.html