zoukankan      html  css  js  c++  java
  • 当input中的type值为file时,各浏览器的表现形式不同

    如果想使各浏览器下的表现形式相同,需要对该input元素隐藏,然后再改元素下方添加标签。其html写法如下

    <div class="input-file">
    <input  type="file" name="postImg" value="上传图片" id="upload" class="file-button">
    <label class="file-button-img">上传封面</label>
    </div>
    

    css布局如下

    .input-file{
    	display: inline-block;
    	height:50px;
    	 120px;
    	/*background-color: #56F06F;*/
    	text-align: center;
    	cursor: pointer;
    	position:relative;
    }
    
    .file-button{
    	opacity: 0;
    	position: absolute;
    	left:0;
    	top:0;
    	120px;
    	height: 50px;
    
    }
    
    .file-button-img{
    	line-height: 50px;
    	text-align: center;
    	display: inline-block;
    	margin-top: 5px;
    	color:#fff;
    	font-size: 18px;
    	100%;
    	height:100%;
    	display: block;
    	cursor:pointer;
    	background-color: #3EF5B1;
    }
  • 相关阅读:
    git
    读后感
    总结
    封装,策略,Asp换脸
    典型用户
    第四次作业
    第三次作业
    计算
    感悟
    对git的认识
  • 原文地址:https://www.cnblogs.com/earnest/p/7603444.html
Copyright © 2011-2022 走看看