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

總結

以上是生活随笔為你收集整理的（原）各种输入框美化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。