自定义带图标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翻译 ...
随机推荐
- Maven的构建/测试/打包
继上一篇http://www.cnblogs.com/EasonJim/p/6809882.html使用Maven创建工程后,接下来是使用Maven进行构建/测试/打包. 在打包之前,先熟悉一下Mav ...
- Android自定义xml解析
<?xml version="1.0" encoding="utf-8"?> <resources> <Users> < ...
- C中的继承和多态
昨天同学面试被问到这个问题,很有水平,以前都没有遇到过这个问题,一时自己也不知道怎么回答. 网上学习了一下,记录以备后用! C/C++ Internals : 里面的问题都写的不错,可以读读! Ref ...
- [Javascript] Await a JavaScript Promise in an async Function with the await Operator
The await operator is used to wait for a promise to settle. It pauses the execution of an async func ...
- 怎样把多个Android Project打包成一个APK
怎样把多个Android Project打包成一个APK(你的项目怎样引用其它项目). 怎样把多个android project 打包成一个apk呢,事实上原理是这种.一个主project引用其它的p ...
- POJ2376 Cleaning Shifts 【贪心】
Cleaning Shifts Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11542 Accepted: 3004 ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- 怎样在C语言里实现“面向对象编程”
有人觉得面向对象是C++/Java这样的高级语言的专利,实际不是这样.面向对象作为一种设计方法.是不限制语言的.仅仅能说,用C++/Java这样的语法来实现面向对象会更easy.更自然一些. 在本节中 ...
- AMD移动FP5平台时序解释
好文章推荐:https://wenku.baidu.com/view/199379576137ee06eef91828.html AMD(FP5封装)时序全解. 由于刚开始接触AMD移动平台,难免有错 ...
- Laravel建站01--开发环境部署
内容导航 安装git 安装composer 安装Laravel 既然是开发环境,就需要源代码管理.这里使用git来管理. 一:部署开发环境之前安装git 在 Linux 上安装git 如果你想在 Li ...