自定义表单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{ 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