zoukankan      html  css  js  c++  java
  • 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

    首先看一下完成后的效果,鼠标移入可改变为手指的效果。

    在此就不加图标了

    <label class="file-upload">
      <span>上传附件</span>
      <input type="file" name="">
    </label>
    

      在IE8中需要将input透明后还不能完全达到效果,还需要将字体设大一些,撑开input,这是IE自带的兼容问题。

    .file-upload{
    	display: inline-block;
    	 120px;
    	height: 36px;
    	line-height: 36px;
    	text-align: center;
    	color: #fff;
    	position: relative;
    	overflow: hidden;
    	background:#3AA1F5;
    	margin-left: 15px;
    }
    .file-upload input{
    	position: absolute;
    	left: 0;
    	top: 0;
    	z-index: 10;
    	opacity: 0;
    	filter:Alpha(opacity=0);
    	color: transparent;
    	 100%;
    	height: 100%;
    	cursor: pointer;
    	font-size: 100px;
    	background:transparent;
    }
    .file-upload span{
    	margin: 0 5px;
    	font-size: 12px;
    }
    

      

  • 相关阅读:
    主外键 子查询
    正则表达式
    css3 文本效果
    css3 2d
    sql 基本操作
    插入 视频 音频 地图
    j-query j-query
    document
    js dom 操作
    js
  • 原文地址:https://www.cnblogs.com/pomelott/p/7400554.html
Copyright © 2011-2022 走看看