CSS设计输入字段类型=文件[关闭]答案

【问题标题】：CSS design a input field type=file [closed]CSS设计输入字段类型=文件[关闭]
【发布时间】：2015-05-23 23:44:05
【问题描述】：

我有一个输入字段：

<input type="file" name="fileToUpload" id="fileToUpload">

现在我想这样设计这个字段：

我该怎么做？

【问题讨论】：

这是 CSS 101。或者，2 分钟。在 Photoshop 中（如果没有的话）； 任你选。
请尝试表现出您的一些努力来重新创建它，否则您只是在要求其他人为您完成工作。
给你W3schools。现在去放飞我的幼鸟！让爸爸感到骄傲。
给你W3Fools@dowomenfart
@JayBlanchard Cool...你的意思是什么？

标签： php html css

【解决方案1】：

这是html：

<span class="filewrap">
    Some funny german words I don't understand
    <input type="file"/>
</span>

这是 CSS：

.filewrap{
    position:relative;
    background:#000;
    border:1px solid #cc0000;
    padding:15px 100px;
    color:#fff;
    font-family:sans-serif;
    font-size:12px;
}

input[type="file"]{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    cursor:pointer;
}

见this demo fiddle

【讨论】：

感谢您的回答！但我有一个问题。如果我使窗口变小，跨度字段将分解并进入下一行。我可以给跨度可能是 305px 的宽度吗？我试过了，没有结果。
@Skeptar，将其设为 div 并执行此操作或do this
谢谢！它适用于 div。

【解决方案2】：

这样做的方法是在输入按钮的顶部放置一个元素并对其进行排序，以便上传输入在下方并因此隐藏。

Fiddle example

HTML

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

CSS

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

一些更有用的链接：

【讨论】：

仅仅发布带有链接的答案并不是一个很好的答案。尝试在 OP 的 cmets 中提供这些链接。
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
在船上，我现在添加了一些代码和一个 JSFiddle。感谢您的反馈。 @DaImTo