1
A
回答
1
它通常做的方法是通过将文件输入单元100%透明用CSS opacity
财产,并把一个漂亮的按钮,它的后面。这样,文件字段仍然会收到点击,但底层元素的外观可以以任何您想要的方式进行样式化和脚本化。
0
文件按钮是一个大难题。我个人会用http://swfupload.org/
0
我喜欢这个吻的方式,像往常一样。这在Chrome和Firefox中适用于我。
HTML:
<div class="form-group">
<label>Cover Image:</label>
<div id="uploadLabelDiv" class="fade">
<p>Change cover image</p>
<label for="upload">
<img [src]="project.cover" class="img-responsive" id="coverImage" />
</label>
</div>
</div>
<input type="file" id="upload" (change)="fileuploaded($event)" style="visibility:hidden;" />
CSS:
#uploadLabelDiv {
position: relative;
max-width: 400px;
background: transparent;
color: #fff;
transition: all 0.3s;
}
.fade {
opacity: 1;
}
.fade:hover > label {
opacity: 0.4;
}
.fade > p {
opacity: 0;
transition: none;
}
.fade:hover > p {
opacity: 1;
transition: all 0.3s;
}
p {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 60px);
color: black;
font: bold;
}
缺少类是引导。
相关问题
- 1. iOS造型输入类型=“文件”
- 2. 造型输入类型=“文件”
- 3. 一个造型输入类型=“文件”
- 4. 造型输入类型=“文件”。如何显示文件路径?
- 5. 造型文字输入插页
- 6. CSS:造型范围输入?
- 7. 造型HTML5号码输入
- 8. 造型选择输入DROPDOWN
- 9. Highcharts:造型输入组
- 10. iPad输入按钮造型
- 11. 造型输入外框 - CSS3
- 12. 造型隐藏的输入
- 13. 造型在输入文件类型中没有文件选择信息
- 14. 粘贴输入类型的文件值输入型文本
- 15. 原型输入类型=文件
- 16. 造型元素
- 17. 插件的造型元素
- 18. 输入文件类型
- 19. 输入事先键入的内容元素的造型
- 20. 发送拖放文件到输入类型文件元素
- 21. 造型,因为Chrome的39
- 22. 上传文件和文件输入型
- 23. 输入类型=“文件”(实际文件?)
- 24. 输入型文本
- 25. PHP输出造型
- 26. 输入类型的文件设置默认文件类型
- 27. 如何过滤文件类型输入类型=“文件”在WinJS
- 28. 造型SVG填充输入元素的颜色
- 29. 聚合物 - 造型纸张输入元素
- 30. CSS - 造型<body>元素与造型<html>元素
是我有必要使用JavaScript或HTML和CSS就足够了? – vlevsha 2010-07-21 15:34:35
这一切正常。谢谢! – vlevsha 2010-07-21 15:54:10