自定义带图标input样式
<!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样式的更多相关文章
- 【转】自定义(滑动条)input[type="range"]样式
1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome: ...
- CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
- 自定义radio图标
问题: 默认的radio控件不是很好看,我们能否自定义一个radio图标? 解决: 1.radio有input和lable两个标签. 2.<input>是前面的图标,选中后图标变化. 3. ...
- Android实现自定义带文字和图片的Button
Android实现自定义带文字和图片的Button 在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就 ...
- 自定义带动画的Toast
一.style样式: 1. // 移动和透明渐变结合的动画 <style name="anim_view"> <item name="@ ...
- jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）
条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...
- 【传】玩转Android---UI篇---ImageButton(带图标的按钮)
原文网址:http://hualang.iteye.com/blog/964049 除了Android系统自带的Button按钮一万,还提供了带图标的按钮ImageButton 要制作带图标的按钮,首 ...
- 自定义checkbox， radio样式
17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...
- Android开源项目——带图标文字的底部导航栏IconTabPageIndicator
接下来的博客计划是,在<Android官方技术文档翻译>之间会发一些Android开源项目的介绍,直接剩下的几篇Android技术文档发完,然后就是Android开源项目和Gradle翻译 ...
随机推荐
- Linux 在VMware中搭建CentOS6.5虚拟机
原文:http://www.cnblogs.com/PurpleDream/p/4263465.html Linux 在VMware中搭建CentOS6.5虚拟机 前言: 本文主要是我在大家 ...
- Engine中如何截取线上指定两点间的线段？
//调用 IPolyline newLine = GetSubCurve(polyline, p1, p2); ESRI.ArcGIS.Display.IScreenDisplay screenD ...
- DevExpress的GridControl如何实现打印和打印预览 z
第一种方法: System.Drawing.Printing.PageSettings set_print_page = new System.Drawing.Printing ...
- vscode格式化代码无效--可能的解决方法
因为vscode默认启用了根据文件类型自动设置tabsize的选项,因此,可以通过关闭自动设置选项,防止格式覆盖.在用户设置里添加如下配置即可: "editor.detectIndentat ...
- javascript一些面试经常使用的问题总结
有关函数调用变量问题 var a =10; function aaa(){ alert(a); } function bbb(){ var a = 20; aaa(); //10 } bbb(); 变 ...
- C/C++中怎样获取日期和时间
C/C++中怎样获取日期和时间摘要: 本文从介绍基础概念入手,探讨了在C/C++中对日期和时间操作所用到的数据结构和函数,并对计时.时间的获取.时间的计算和显示格式等方面进行了阐述.本文还通过大量的实 ...
- C# Main(string[] args)方法参数
Main 方法是 C# 控制台应用程序或窗口应用程序的入口点,以下是各种情况下方法参数的输入方式: 1.通过vs启动,需要在“项目属性-调试-启动选项-命令行参数”中配置参数,格式为:参数一 参数二 ...
- java开始到熟悉103-104
本次内容:linkedlist() 此次是承接上次arraylist(),自己实现linkedlist()(内容较少) package list; /** * 自定义linkedlist类 * @au ...
- laravel 将数组转化成字符串 再把字符串转化成数组
这是在给阮少翔改代码的时候用的方法, 开始的数据用explored转化成数组不是想要的结果, 我就自己写了一个方法把有用的信息提取出来拼接成一个字符串, 再用explored将字符串转化成数组. ...
- uboot下载地址
非常奇怪百度搜索都搜不到一个好的uboot下载的说明,仅此标记 HOME http://www.denx.de/wiki/U-Boot/SourceCode sourcecode http://www ...