Jugar con los estilos del input para subir archivos no es fácil, pues la mayoría de los navegadores no permiten darle estilo directamente, ni con JavaScript ni con CSS. Semantic UI, al igual que la mayoría de frameworks CSS no ofrece un estilo específico para dicho elemento.
Hay muchas soluciones provisionales, las cuales yo consideraría más como "trucos" de CSS y/o JavaScript para lograr dicho efecto.
Te dejo uno de tantos ejemplos que puedes encontrar en 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"/>
Otro ejemplo, un poco más "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>
Hay una opción que puede ser muy interesante con Materialize CSS, pero tal vez se sale un poco del alcance de la pregunta, al igual que el anterior de Bootstrap:
http://materializecss.com/forms.html#file