Question

我找到了有关自定义文件上传设计的教程/文章。他在输入标签下面使用了标签，但在我的情况下，标签位于输入标签之前，我无法调整标签以降低输入标签，因为我在服务器端使用django来呈现表单使用DRY原则。我创建了jsfiddle，但代码不是我的。代码和概念来自以下链接

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

这是jsfiddle演示

https://jsfiddle.net/b7rmwhnf/

这是代码

＆＃13;

.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;
}

＆＃13;

<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" />

＆＃13;

Answer 1

这适用于+ selector，在您的情况下，label的样式input ...

不幸的是之前没有＆＃39; CSS中的选择器。

标签位于输入标签之前时，图像上传设计不起作用

1 个答案: