<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>自定义带图标input样式</title>

        <style>

            .test{

                width: 400px;

                height: 400px;

                border: 3px solid #008000;

                margin: 0 auto;

                text-align: center;

            }

            .test:before{

                content: "";

                display: inline-block;

                vertical-align: middle;

                height: 100%;

            }

            .input{

                display: inline-block;

                vertical-align: middle;

            }

            .text{

                padding: 10px 35px;

                position: relative;

                z-index: 20;

                color: red;

            }

            .icon{

                display: block;

                position: absolute;

                padding: 0 0 0 25px;

                height: 40px;

                background: url('http://res.ckimg.com/sites/www/v2/images/passport/input_icon.png') no-repeat;

                z-index: 21;

            }

        </style>

    </head>

    <body>

        <div class="test">

            <div class="input">

                <label class="icon" for="id"></label>

                <input class="text" id="id"/>

                <span></span>

            </div>

        </div>

    </body>

</html>

输出效果：

aaarticlea/png;base64,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" alt="" />

自定义带图标input样式的更多相关文章

  1. 【转】自定义(滑动条)input[type="range"]样式

    1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome:  ...

  2. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  3. 自定义radio图标

    问题: 默认的radio控件不是很好看,我们能否自定义一个radio图标? 解决: 1.radio有input和lable两个标签. 2.<input>是前面的图标,选中后图标变化. 3. ...

  4. Android实现自定义带文字和图片的Button

    Android实现自定义带文字和图片的Button 在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就 ...

  5. 自定义带动画的Toast

    一.style样式: 1.  // 移动和透明渐变结合的动画 <style name="anim_view">        <item name="@ ...

  6. jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  7. 【传】玩转Android---UI篇---ImageButton(带图标的按钮)

    原文网址:http://hualang.iteye.com/blog/964049 除了Android系统自带的Button按钮一万,还提供了带图标的按钮ImageButton 要制作带图标的按钮,首 ...

  8. 自定义checkbox， radio样式

    17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...

  9. Android开源项目——带图标文字的底部导航栏IconTabPageIndicator

    接下来的博客计划是,在<Android官方技术文档翻译>之间会发一些Android开源项目的介绍,直接剩下的几篇Android技术文档发完,然后就是Android开源项目和Gradle翻译 ...

随机推荐

  1. Maven的POM简单理解

    以下引用自官方的POM介绍https://maven.apache.org/guides/introduction/introduction-to-the-pom.html: 一.什么是POM? 项目 ...

  2. pv，uv

    1.PV PV(page view),即页面浏览量:用户每1次对网站中的每个网页访问均被记录1次.用户对同一页面的多次访问,访问量累计. 2．什么是UV uv(unique visitor),指访问某 ...

  3. 【转】Ubuntu下出现Mysql error(2002)的解决方法

    过了一阵子后,为了写分布式作业,重新使用Mysql时,发现虽然启动成功了,但是连接的时候去出现如下错误ERROR 2002 (HY000): Can't connect to local MySQL ...

  4. SWTBOK測试实践系列（5） -- 项目中使用手动和自己主动化的策略

    手动測试和自己主动化測试永远是一个非常热门的话题.自己主动化也一直被人们捧上神坛.自己主动化測试和手动測试从技术上来说本质事实上都是測试用例设计.仅仅只是终于形式一个是人工运行,一个是代码运行罢了.这 ...

  5. vs2012编译ffmpeg

    从官方网站down下来的ffmpeg没有pdb文件不方便调试,为此使用VS2012编译ffmpeg. 编译步骤: 一.安装MinGW,具体的安装方法上一篇文章已经有介绍这里不在赘述. 二.下载文件并放 ...

  6. 用字符串处理函数中的比较函数strcmp做的一个密码登录验证

    正确返回0 1大返回正数 2大返回负数  1,2表示输入字符串1和字符串2 根据ASCII码大小来判断 代码: #include<stdio.h> #include<string.h ...

  7. Java、C++、Python、Ruby、PHP、C#和JavaScript的理解

    Java.C++.Python.Ruby.PHP.C#和JavaScript和日本动漫里的那些大家熟悉的动漫人物结合起来.依据他们的身世.个人经历来生动的表达各编程语言的发展历程.原文内容例如以下:  ...

  8. JS 常用字符串操作

    Js字符串操作函数大全 /*******************************************                        字符串函数扩充              ...

  9. Spring AOP和IOC（转载）

    spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实 ...

  10. Eclipse快捷键大全（转载）

    一·eclipse 中的一些常用的快捷键Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键.   1. [ALT+/] ...