(原)各种输入框美化
更新于20161124
(均可兼容IE8以上)
1. input[type=file]
如图
上传图片前 上传图片后
<div class="claCreate_ipt"><div id="preview"><img id="imghead" src='./images/class_img4.png' /></div><a href="javascript:;" class="uploadBtn">上传<input type="file" onchange="previewImage(this)" /></a> </div>
.claCreate_ipt{padding-left: 18px; }.claCreate_ipt input[type=text]{border: solid 1px #b29a91;border-radius: 10px;color: #b29a91;padding: 0 20px;height: 28px;width: 286px; }/* 头像上传 */ #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}.uploadBtn, #preview{float: left; }#imghead{width: 118px;height: 118px; }.uploadBtn {position: relative;display: inline-block;background-color: #ecb43b;border-radius: 6px;padding: 6px 24px;overflow: hidden;color: #fff;text-indent: 0;font-size: 18px;top: 78px;margin-left: 32px;line-height: 26px; } .uploadBtn input {position: absolute;right: 0;top: 0;bottom: 0;left: 0;opacity: 0; } .uploadBtn:hover {background-color: #f0b73c;text-decoration: none; } /* 头像上传 END*/
//图片上传预览 IE是用了滤镜。 function previewImage(file) {var MAXWIDTH = 118; var MAXHEIGHT = 118;var div = document.getElementById('preview');if (file.files && file.files[0]){div.innerHTML ='<img id=imghead>';var img = document.getElementById('imghead');img.onload = function(){var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);img.width = rect.width;img.height = rect.height; // img.style.marginLeft = rect.left+'px';img.style.marginTop = rect.top+'px';}var reader = new FileReader();reader.onload = function(evt){img.src = evt.target.result;}reader.readAsDataURL(file.files[0]);}else //兼容IE {var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';file.select();var src = document.selection.createRange().text;div.innerHTML = '<img id=imghead>';var img = document.getElementById('imghead');img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";} } function clacImgZoomParam( maxWidth, maxHeight, width, height ){var param = {top:0, left:0, width:width, height:height};if( width>maxWidth || height>maxHeight ){rateWidth = width / maxWidth;rateHeight = height / maxHeight;if( rateWidth > rateHeight ){param.width = maxWidth;param.height = Math.round(height / rateWidth);}else{param.width = Math.round(width / rateHeight);param.height = maxHeight;}}param.left = Math.round((maxWidth - param.width) / 2);param.top = Math.round((maxHeight - param.height) / 2);return param; }
2. select
如图
<div class="ansIndex_toperSel"><select><option>所有科目</option><option>所有科目1</option></select> </div>
.ansIndex_toperSel{float: left;width: 140px;height: 30px;margin: 17px 60px 0 0;border: none;border-radius: 5px;overflow: hidden;background: url(../images/select.jpg) no-repeat right #fff; }.ansIndex_toperSel select {background: transparent;width: 170px;height: 30px;font-size: 16px;padding: 0 10px;border: none;border-radius: 5px;-webkit-appearance: none; /*for chrome*/ }
转载于:https://www.cnblogs.com/microhuu/p/6099744.html
(原)各种输入框美化相关推荐
- 14款CSS3炫酷表单input输入框美化效果【附源码】
这是一款效果非常酷的CSS3表单input输入框美化效果插件.为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验.这个CSS3表单input输入框美化插件就是一个很好的例子.这个插件 ...
- uniapp微信小程序项目-优购商城
原网页笔记文档: https://www.escook.cn/docs-uni-shop/ 1. 起步 #1.1 uni-app 简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架 ...
- 微信小程序--优购商城项目(4)
文章目录 前言 五.搜索 1.创建 search 分支 2.自定义搜索组件 (1)自定义 my-search 组件 (2) 通过自定义属性增强组件的通用性 (3)为自定义组件封装 click 事件 ( ...
- uniapp - 电商优购项目
目录 前言 例如:基于 uniapp 开发的微信小程序商城项目 1. 起步 1.1 uni-app 简介 1.2 开发工具 1.2.1 下载 HBuilderX 1.2.2 安装 HBuilderX ...
- uni-app:搜索
创建 search 分支 运行如下的命令,基于 master 分支在本地创建 search 子分支,用来开发搜索相关的功能: git checkout -b search 自定义搜索组件 自定义 my ...
- EditText禁止输入回车
第一种方法://最简单 @Overridepublic boolean dispatchKeyEvent(KeyEvent event) {switch (event.getKeyCode()) {c ...
- 12种超酷HTML5 SVG和CSS3浮动标签效果
这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...
- 360浏览器,qq浏览器等登录页输入账号密码,在页面内再次遇见有密码框的地方会自动填充的解决办法。
在360浏览器,qq浏览器等登录页输入账号密码,在页面内再次遇见有密码框的地方会自动填充,在网上没有找到合适的解决办法,然后自己琢磨了一个,仅供参考. 登录页的账号密码输入框不需要做任何变化. 我们可 ...
- 一种基于智能卡登录Windows系统的实现方式
随着Windows操作系统的发展,Windows操作系统开机登录程序也在不断改进.在Windows Vista和Windows 7操作系统中,微软取消了Windows NT/2000中交互式登录支持的 ...
最新文章
- 从输入url到显示网页,后台发生了什么?
- c语言 倒计时不清屏_打字游戏超细讲解(C语言基础小游戏)
- LinkedIn已将可自定义的索引引擎IndexTank开源
- 使用Gradle引导旧式Ant构建
- fdtd中时间监视器怎么放_利用FDTD软件仿真拓扑光子(六)-单向传播仿真与软件设置...
- 2020年,程序员要做好苦日子的准备了!
- Google Chrome 将禁止“退格键”作为后退按钮使用
- systemtap打点方法
- java 邮箱的代接收服务_Java开源网络验证系统专门为中小企业提供-verify
- vb导出mysql字段名_VB获取数据库字段名
- 立创商城的元件原理图怎么弄到ad_(50条消息)立创EDA元件封装导入AD软件教程
- php大写数字转换,php数字如何转换大写
- win10任务栏全透明
- 寻找道路(NOIP2014)神奇之题。。
- [STM32F429IGT6]-TIM ETR 计数
- linux的的符号,Linux 常见特殊符号
- Dynamics CRM IFD部署如何更换SSL证书
- unitoy机器人怎么联网_乐乐智能机器人怎么联网?
- 酷派COOL20s什么时候发布 酷派COOL20s配置如何
- 更改分辨率时banner图片变形解决方案
热门文章
- 2018 GDCPC 省赛总结
- 安装Hue后的一些功能的问题解决干货总结(博主推荐)
- C#语言实现定时开启或禁用网卡小程序
- TreeSet里面放对象,如果同时放入了父类和子类的实例对象,那比较时使用的是父类的compareTo方法,还是使用的子类的compareTo方法,还是抛异常!...
- select()函数用法
- LoadRunner监控局域网内其他服务器系统资源设置
- ASP.Net MVC框架配置分析详解
- 一步一步SharePoint 2007之二十五:编写一个最简单的WebPart(3)——添加WebPart
- 微软确定 Win10 付费才能玩 还能不能愉快玩耍?
- MongoDB系列(一):简介及安装