更新于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

(原)各种输入框美化相关推荐

  1. 14款CSS3炫酷表单input输入框美化效果【附源码】

    这是一款效果非常酷的CSS3表单input输入框美化效果插件.为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验.这个CSS3表单input输入框美化插件就是一个很好的例子.这个插件 ...

  2. uniapp微信小程序项目-优购商城

    原网页笔记文档: https://www.escook.cn/docs-uni-shop/ 1. 起步 #1.1 uni-app 简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架 ...

  3. 微信小程序--优购商城项目(4)

    文章目录 前言 五.搜索 1.创建 search 分支 2.自定义搜索组件 (1)自定义 my-search 组件 (2) 通过自定义属性增强组件的通用性 (3)为自定义组件封装 click 事件 ( ...

  4. uniapp - 电商优购项目

    目录 前言 例如:基于 uniapp 开发的微信小程序商城项目 1. 起步 1.1 uni-app 简介 1.2 开发工具 1.2.1 下载 HBuilderX 1.2.2 安装 HBuilderX ...

  5. uni-app:搜索

    创建 search 分支 运行如下的命令,基于 master 分支在本地创建 search 子分支,用来开发搜索相关的功能: git checkout -b search 自定义搜索组件 自定义 my ...

  6. EditText禁止输入回车

    第一种方法://最简单 @Overridepublic boolean dispatchKeyEvent(KeyEvent event) {switch (event.getKeyCode()) {c ...

  7. 12种超酷HTML5 SVG和CSS3浮动标签效果

    这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...

  8. 360浏览器,qq浏览器等登录页输入账号密码,在页面内再次遇见有密码框的地方会自动填充的解决办法。

    在360浏览器,qq浏览器等登录页输入账号密码,在页面内再次遇见有密码框的地方会自动填充,在网上没有找到合适的解决办法,然后自己琢磨了一个,仅供参考. 登录页的账号密码输入框不需要做任何变化. 我们可 ...

  9. 一种基于智能卡登录Windows系统的实现方式

    随着Windows操作系统的发展,Windows操作系统开机登录程序也在不断改进.在Windows Vista和Windows 7操作系统中,微软取消了Windows NT/2000中交互式登录支持的 ...

最新文章

  1. 从输入url到显示网页,后台发生了什么?
  2. c语言 倒计时不清屏_打字游戏超细讲解(C语言基础小游戏)
  3. LinkedIn已将可自定义的索引引擎IndexTank开源
  4. 使用Gradle引导旧式Ant构建
  5. fdtd中时间监视器怎么放_利用FDTD软件仿真拓扑光子(六)-单向传播仿真与软件设置...
  6. 2020年,程序员要做好苦日子的准备了!
  7. Google Chrome 将禁止“退格键”作为后退按钮使用
  8. systemtap打点方法
  9. java 邮箱的代接收服务_Java开源网络验证系统专门为中小企业提供-verify
  10. vb导出mysql字段名_VB获取数据库字段名
  11. 立创商城的元件原理图怎么弄到ad_(50条消息)立创EDA元件封装导入AD软件教程
  12. php大写数字转换,php数字如何转换大写
  13. win10任务栏全透明
  14. 寻找道路(NOIP2014)神奇之题。。
  15. [STM32F429IGT6]-TIM ETR 计数
  16. linux的的符号,Linux 常见特殊符号
  17. Dynamics CRM IFD部署如何更换SSL证书
  18. unitoy机器人怎么联网_乐乐智能机器人怎么联网?
  19. 酷派COOL20s什么时候发布 酷派COOL20s配置如何
  20. 更改分辨率时banner图片变形解决方案

热门文章

  1. 2018 GDCPC 省赛总结
  2. 安装Hue后的一些功能的问题解决干货总结(博主推荐)
  3. C#语言实现定时开启或禁用网卡小程序
  4. TreeSet里面放对象,如果同时放入了父类和子类的实例对象,那比较时使用的是父类的compareTo方法,还是使用的子类的compareTo方法,还是抛异常!...
  5. select()函数用法
  6. LoadRunner监控局域网内其他服务器系统资源设置
  7. ASP.Net MVC框架配置分析详解
  8. 一步一步SharePoint 2007之二十五:编写一个最简单的WebPart(3)——添加WebPart
  9. 微软确定 Win10 付费才能玩 还能不能愉快玩耍?
  10. MongoDB系列(一):简介及安装