当标签超出输入标签时，图片上传设计不起作用

我找到了关于自定义文件上传设计的教程/文章。在那里，他使用标签正下方的输入标签，但在我的情况下，标签在输入标签之前，我无法调整标签以降低输入标签，因为我使用django作为使用DRY呈现表单的服务器端原理。我创建了jsfiddle，但代码不是我的。代码和概念是从以下链接当标签超出输入标签时，图片上传设计不起作用

https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

这里是的jsfiddle演示

https://jsfiddle.net/b7rmwhnf/

这里是代码

.inputfile { 
 
    width: 0.1px; 
 
    height: 0.1px; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 

 
.inputfile+label { 
 
    font-size: 1.5em; 
 
    font-weight: 700; 
 
    color: #fff; 
 
    background-color: #598C93; 
 
    padding: 20px; 
 
    display: inline-block; 
 
} 
 

 
.inputfile:focus+label, 
 
.inputfile+label:hover { 
 
    background-color: #598C93; 
 
} 
 

 
.inputfile+label { 
 
    cursor: pointer; 
 
    /* "hand" cursor */ 
 
} 
 

 
.inputfile+label:before { 
 
    font-family: FontAwesome; 
 
    content: "\f093"; 
 
    display: inline-block; 
 
    padding-right: 3px; 
 
    vertical-align: middle; 
 
} 
 

 
.inputfile+label * { 
 
    pointer-events: none; 
 
}

<input type="file" name="file" id="file" class="inputfile" /> 
 
<label for="file">Choose a file</label> 
 

 
<label for="file">Choose a file</label> 
 
<input type="file" name="file" id="file" class="inputfile" />

来源

2017-09-26 milan

所以......你希望标签在输入的**下面？我不确定我明白你想在这里做什么。 – ProEvilz

这工作到期+ selector而你的情况，款式肚里的input后的label ...

不幸的是，在CSS没有“之前的”选择。

来源

2017-09-26 12:12:44

如果标签在输入标签的前面，我不能达到预期的结果吗？ – milan

不，你不能遗憾，因为没有这样的选择器。 –

谢谢。我不得不改变我的部件样式 – milan

当标签超出输入标签时，图片上传设计不起作用

回答

相关问题