Home / Questions / 83704
Accepted
MNibor
Asked: 2020-07-05 09:21:06 +0800 CST 2020-07-05 09:21:06 +0800 CST

Styling a file upload button with semantic-ui

  • 772

I have a button on the form that is used to upload an image. But applying the typical code does not look good...

          <div class="ui segment">
        <div class="field">
          <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
          <label for="#elegir">Elige el archivo a subir: </label>
          <input id="elegir" name="uploadedfile" type="file" /><br />
          <input type="submit" class="ui blue inline button" value="Subir archivo" />
        </div>
      </div>

So it loads me in the form

I searched the semantic-ui documentation but didn't find an implementation of this item...

html

1 Answers

  1. Best Answer

    Playing with the styles of the input to upload files is not easy, since most browsers do not allow you to style it directly, neither with JavaScript nor with CSS. Semantic UI, like most CSS frameworks, does not offer a specific style for said element.

    There are many workarounds, which I would consider more like CSS and/or JavaScript "tricks" to achieve such an effect.

    I leave you one of many examples that you can find on the internet:

    input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Subir archivo
</label>
<input id="file-upload" type="file"/>

    Another example, a bit more "Bootstrap":

    .btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Subir archivo <input type="file">
</span>

    There is an option that can be very interesting with Materialize CSS, but maybe it is a bit out of the scope of the question, just like the previous Bootstrap one:

    http://materializecss.com/forms.html#file

    • 1