Question

我正试图对this article进行一下调整，以便为文件上传输入提供外观更好的用户界面。简而言之，它主要是仅CSS的方法，用于隐藏浏览器的本机输入按钮并将其替换为样式标签。我要使用它的项目也恰好是Ionic3项目，因此我希望标签的样式看起来像自然的离子按钮。

如果标签包含纯文本，则本文中的代码会很好用，但是，如果我尝试在标签中嵌入按钮元素，无论我是否偶然使用ion-button属性，我都不会得到爱。 / p>

  .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }

  .inputfile + label {
    display: inline-block;
  }

  .inputfile + label {
    cursor: pointer; /* "hand" cursor */
  }

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file text label</label> &lt;-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
  <button>Choose a file button label</button>
</label> &lt;-- this doesn't work

Answer 1

这不是纯CSS解决方案，也不是特定于Ionic的解决方案，但是通常来说，要让按钮作为隐藏文件输入元素的UI进入，以下似乎有效。您可以在按钮上放置一个单击处理程序，然后在该处理程序中，调用输入元素的DOM单击处理程序：

build_help_message

<button (click)="handleClick($event)">Choose a file</button>

Answer 2

最好将文本标签的样式设置为看起来像按钮。

  .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }

  .inputfile + label {
    display: inline-block;
  }

  .inputfile + label {
    cursor: pointer; /* "hand" cursor */
  }
  .button {
    -webkit-appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 11px system-ui;
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
    border-style: solid;
    border-width: 1px;
    padding: 1px 7px 2px;
  }

<input type="file" name="file" id="file" class="inputfile" />
<label for="file" class="button">Choose a file text label</label> &lt;-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
  <button>Choose a file button label</button>
</label> &lt;-- this doesn't work

用样式标签/按钮替换浏览器的本机文件输入UI

2 个答案: