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

我使用<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;*/}

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

自定义表单input的更多相关文章

  1. 【.net+jquery】绘制自定义表单（含源码）

    前言 两年前在力控的时候就想做一个类似的功能,当时思路大家都讨论好了,诸多原因最终还是夭折了.没想到两年多后再这有重新提出要写一个绘制表单的功能.对此也是有点小激动呢?总共用时8.5天的时间基本功能也 ...

  2. [转]django自定义表单提交

    原文网址:http://www.cnblogs.com/retop/p/4677148.html 注:本人使用的Django1.8.3版本进行测试 除了使用Django内置表单,有时往往我们需要自定义 ...

  3. Dedecms自定义表单后台列表展现方式更改

    Dedecms有自定义表单功能,方便我们收集用户信息.个人通常喜欢拿这个功能做问卷调查,在线留言等功能.但是如果使用过这个功能的朋友就会知道,Dedecms自定义表单后台列表展现方式并不好看. 上面就 ...

  4. Vue组件之自定义表单组件

    今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单 ...

  5. Django初体验（一）:自定义表单提交

    注:本人使用的Django1.8.3版本进行测试 除了使用Django内置表单,有时往往我们需要自定义表单.对于自定义表单Post方式提交往往会带来由CSRF(跨站请求伪造)产生的错误"CS ...

  6. DedeCMS提交自定义表单加入验证码功能

    织梦dedecms网站给自定义表单加dede模板自带验证码的方法. 有时候,我们因为需要给dede网站的自定义表单添加验证码,防止恶意填写表单提交. 我们可以用以下的方法来实现: 首先,我们要找到 / ...

  7. activiti自定义流程之整合（三）：整合自定义表单创建模型

    本来在创建了表单之后应该是表单列表和预览功能,但是我看了看整合的代码,和之前没有用angularjs的基本没有什么变化,一些极小的变动也只是基于angularjs的语法,因此完全可以参考之前说些的表单 ...

  8. activiti自定义流程之自定义表单（二）：创建表单

    注:环境配置:activiti自定义流程之自定义表单(一):环境配置 在上一节自定义表单环境搭建好以后,我就正式开始尝试自己创建表单,在后台的处理就比较常规,主要是针对ueditor插件的功能在前端进 ...

  9. Angular19 自定义表单控件

    1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...

随机推荐

  1. crontab实现每秒执行

    crontab: #!/bin/bash step=$1 #每多少秒执行一次 ; i < ; i=(i+step) )); do date +%Y%m%d' '%H:%M:%S >> ...

  2. C++中的类型重定义

    发现重复定义是由于从两个不同的路径包含了同一个头文件而引起的,同事也建议从另外一个路径打开工程试试, 这才慢慢发现了原因.这个原因可能有些拗口,而事实上要出现这种错误也有些"曲折" ...

  3. ［转］iOS学习之UINavigationController详解与使用(二)页面切换和segmentedController

    转载地址:http://blog.csdn.net/totogo2010/article/details/7682433 iOS学习之UINavigationController详解与使用(一)添加U ...

  4. hihoCoder 数论五·欧拉函数

    题目1 : 数论五·欧拉函数 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho有时候会用密码写信来互相联系,他们用了一个很大的数当做密钥.小Hi和小Ho约定 ...

  5. 动态规划之LCS(最大公共子序列)

    #include <stdio.h> #include <string.h> int b[50][50]; int c[50][50]; int length = 0; voi ...

  6. asp.net 关闭子窗体 刷新主窗体

    主窗体************************************************************************************ //原窗口保留,以对话框 ...

  7. Animation Play/Stop测试

    测试结果: 1.当切换不同动画播放,可以直接调用Play或者CrossFade.会立即切过去 2.当相同动画再次播放,又想打断重头再播,需要先调用Stop. anim.Play("Test1 ...

  8. HDU(3555)，数位DP

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3555 Bomb Time Limit: 2000/1000 MS (Java/Others ...

  9. dede源码详细分析之--全局变量覆盖漏洞的防御

    http://blog.csdn.net/ebw123/article/details/8100594

  10. Python类的定义与使用

    #! /usr/bin/python # Filename:objvar.py class Person: '''Represents a person.''' population = 0 def ...