CSS module for semantic inline [type=file] inputs

browse.scss

.browse {
    display: inline;
    font-size: inherit;
}

.browse__input {
    display: inline-block;
    position: absolute;
    @include px-rem(padding, .1);
    @include px-rem(margin, 0, -.5);
    height: 0;
    width: 0;
    overflow: hidden;
    &::before {
        // hack to respect the `cursor` style
        white-space: pre;
        content: " ";
        display: block;
    }
}

// enabled or disabled
.browse__input[class] {
    opacity: .0001;
}

.browse__label {
    display: inline-block;
}

.browse__input:enabled,
.browse__input:enabled + .browse__label {
    cursor: pointer;
}

example markup

Or <label class="browse"><input tabindex="0" class="browse__input" type="file"><span class="browse__label">browse</span></label> your computer.

alternate markup

<fieldset class="browse">
    <input id="browse" class="browse__input" type="file" tabindex="0">
    <label for="browse" class="browse__label button">Browse</label>
</fieldset>