Блог

Я пытаюсь загрузить файлы, и ниже приведен скриншот, кто-нибудь знает, как настроить кнопки в стиле кнопок начальной загрузки?

Вот код шаблона:

 <form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>{{ form.non_field_errors }}</p>

    {#  WL file #}
    <p>{{ form.wlfile.label_tag }} {{ form.wlfile.help_text }}</p>
    <p>
        {{ form.wlfile.errors }}
        {{ form.wlfile }}
    </p>
    {# BL file#}
    <p>{{ form.blfile.label_tag }} {{ form.blfile.help_text }}</p>
    <p>
        {{ form.blfile.errors }}
        {{ form.blfile }}
    </p>

    <div class="form-group">
        <div align="right" class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">{% trans "Next" %}</button>
        </div>
    </div>
</form>
  

Пожалуйста, посмотрите на это: https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3

HTML:

 <span class="btn btn-default btn-file">
    Browse <input type="file">
</span>
  

CSS:

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

Рабочий пример: http://codepen.io/claviska/pen/vAgmd