博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
上传按钮样式优化 <input type="file" />
阅读量:5864 次
发布时间:2019-06-19

本文共 842 字,大约阅读时间需要 2 分钟。

<html>

<head>
<title>上传按钮样式优化</title>

<style>

.form-element-file-wapper {
position: relative;
width: 100px;
height: 32px;
overflow: hidden;
margin: 0 auto;
}

.form-element-file-wapper button {

width: 100px;
height: 32px;
background-color: #38ADFF;
color: #fff;
}

.form-element-file-wapper input[type=file] {

position: absolute;
top: 0;
left: 0;
width: 100px;
height: 32px;
opacity: 0;
cursor: pointer;
font-size: 500px;
}

</style>

</head>

<body>

<div class="form-element-file-wapper">

<button type="button">上传照片</button>
<input type="file" accept="image/jpeg,image/png,image/gif">
</div>

</body>
</html>

 

<!--

总结:

1.<div class="form-element-file-wapper">作为父元素 style="position: relative;"

2.<input type="file" />置为不可见。 style="position: absolute;"  让元素漂在<button></button>元素上面。用户点击其实就点击这元素。

3.<button type="button">上传照片</button> 作为显示按钮,显示给用户看。

-->

 

转载地址:http://hbynx.baihongyu.com/

你可能感兴趣的文章
2.7 最佳创新先锋:韵达集团副总裁兼CIO杨周龙
查看>>
【原创】MySQL Proxy - query注入动作中的脚本序列
查看>>
用代码画流程图和时序图快餐教程(2) - mermaid数据流图速成
查看>>
pdflush的工作流程
查看>>
spider 介绍
查看>>
热门论文Top 30:那些被国外专家引用最多的计算机视觉和深度学习论文【可下载】...
查看>>
WebLogic集群体系架构(原创)
查看>>
【ANDROID游戏开发二十一】ANDROID OS设备谎言分辨率的解决方案!以及简单阐述游戏引擎如何使用!...
查看>>
[多问几个为什么]为什么匿名内部类中引用的局部变量和参数需要final而成员字段不用?...
查看>>
ExtJS5学习之TreePanel
查看>>
[Servlet&amp;JSP] HttpServletRequest的使用
查看>>
页面分部分加载呈现收集(不断更新中)
查看>>
涉密数据的处理
查看>>
讨喜的隔离可变性(十二)基于角色模型的局限性和小结
查看>>
[翻译] JTSlideShadowAnimation
查看>>
Android 性能测试实践(三)Cpu
查看>>
GCD之Apply
查看>>
【Linux系统编程】 浅谈标准I/O缓冲区
查看>>
谈笑风生组件化
查看>>
IOS 30多个iOS常用动画,带详细注释
查看>>