自定义带图标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翻译 ...
随机推荐
- android studio C/C++ jni 编写以及调试方法
原文路径: http://blog.sina.com.cn/s/blog_ad64b8200102vnxl.html 目录 开发环境 2 编写hello_jni程序 2 运行结果 10 调试程序 10 ...
- Go语言 -- 获取命令行参数
部署golang项目时难免要通过命令行来设置一些参数,那么在golang中如何操作命令行参数呢?可以使用flag库和os库.1.flag库的使用 Go语言标准库提供了用于快迅解析命令行参数的flag包 ...
- 强大的开源网络侦查工具：IVRE
IVRE简介 IVRE(又名DRUNK)是一款开源的网络侦查框架工具,IVRE使用Nmap.Zmap进行主动网络探测.使用Bro.P0f等进行网络流量被动分析,探测结果存入数据库中,方便数据的查询.分 ...
- Dance In Heap（一）：浅析堆的申请释放及相应保护机制
0×00 前面的话 在内存中,堆是一个很有趣的地方,因为它可以由用户去直接的进行分配与销毁,所以也产生了一些很有趣.奇思妙想的漏洞,像unlink漏洞.House系列漏洞等等.但是在学习的过程中,我们 ...
- C# 通过WebService方式 IIS发布网站 上传文件到服务器[转]
http://blog.sina.com.cn/s/blog_517cae3c0102v0y7.html 应用场景:要将本地的文件 上传到服务器的虚拟机上 网络环境:公司局域网(如下图中第二种) 开发 ...
- xml实现AOP
1.使用<aop:config></aop:config> 2.首先我们需要配置<aop:aspect></aop:aspect>,就是配置切面 2.1 ...
- shell（1）：网络配置、BATH环境和通配符
一.临时配置网络(ip,网关,dns) ifconfig查看网络配置 修改ip地址 ifconfig ens33 192.168.255.129/24 ens33网卡名称.192.168.255.1 ...
- rf-demos (request)
*** Settings *** Library RequestsLibrary Library Collections Library XML *** Test Cases *** case1 Cr ...
- 笔记04 WPF的Binding
oneWay:使用 OneWay 绑定时,每当源发生变化,数据就会从源流向目标. OneTime: 绑定也会将数据从源发送到目标:但是,仅当启动了应用程序或 DataContext 发生更改时才会如此 ...
- 随便写一点最近开发遇到的问题和解决方法 大部分关于laravel和php
laravel里要想对对象进行自己设计的排序(usort()), 得用匿名方法, 原声php就不用 php里面可以随便写html代码, 比如可以把html直接后缀名改成.php, 然后在任何地方& ...