自定义带图标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翻译 ...
随机推荐
- Data.FireDACJSONReflect单元不支持跨平台
Data.FireDACJSONReflect不支持跨平台 Data.FireDACJSONReflect里面:IFDJSONDeltasApplyUpdates,TFDJSONDeltas,TFDJ ...
- CodeSign error: code signing is required for product type 'Application' in SDK 'iOS 7.0'
这个一般是证书设置的问题, 在build settings中找到 Code Signing->Code Signing Identity修改成有效的证书即可
- Android 检查输入
在开发过程中,会经常遇到这样的需求:上面有很多的输入控件,等所有的输入都合法后,按钮才能自动变成enabled的状态,才能继续下一步的操作. 下面是一种用观察者模式实现的一种解决方案. button代 ...
- Android自己定义组件系列【6】——进阶实践（3）
上一篇<Android自己定义组件系列[5]--进阶实践(2)>继续对任老师的<可下拉的PinnedHeaderExpandableListView的实现>进行了分析,这一篇计 ...
- 解决Sophos UTM 9防火墙上的“根分区填满”问题
Resolving 'Root Partition Is Filling Up' Issue on Sophos UTM Firewall 收到“Sophos UTM 9”防火墻的“根分區填满”问题的 ...
- MySQL主从复制技术与读写分离技术amoeba应用
MySQL主从复制技术与读写分离技术amoeba应用 前言:眼下在搭建一个人才站点,估计流量会非常大,须要用到分布式数据库技术,MySQL的主从复制+读写分离技术.读写分离技术有官方的MySQL-pr ...
- LattePanda 项目之 P2.2 起飞条件检测系统（CLI & GUI）
前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验和正常的链接.图片显示,请访问我的博客原文: http://www.cnblog ...
- Windows socket I/O模型 之 select（2）
在Windows socket I/O模型 之 select(1)中.我们仅仅是在console中简单的模拟了select的处理方法. 还有非常多特性不能改动.比方仅仅能写,不能读. 没使用线程.也 ...
- C++ 坑人系列(1): 让面试官晕倒的题目
今天和几位同仁一起探讨了一下C++的一些基础知识,在座的同仁都是行家了,有的多次当过C++技术面试官.不过我出的题过于刁钻: 不是看起来太难,而是看起来极其容易,但是其实非常难! 结果一圈下来,3道 ...
- iOS开发之加载、滑动翻阅大量图片优化解决方案
本文转载至 http://mobile.51cto.com/iphone-413267.htm 今天分享一下私人相册中,读取加载.滑动翻阅大量图片解决方案,我想强调的是,编程思想无关乎平台限制.我要详 ...