Блог

Главная - Вопросы по программированию - Получение единообразного внешнего вида для управления входным файлом с использованием CSS и HTML

Получение единообразного внешнего вида для управления входным файлом с использованием CSS и HTML

#html #css

#HTML #css

Вопрос:

Я пытаюсь настроить внешний вид элемента управления просмотром файлов и заменить его простой кнопкой «добавить файлы». Я добавил следующую разметку. Однако это хорошо работает с элементом уровня блока «div», и мне нужно указать ширину для div, чтобы ограничить его ширину.

Я попытался изменить div на span. Пользовательский интерфейс выглядит хорошо, однако функция overflow: hidden работает некорректно, из-за чего скрытая (с непрозрачностью: 0) область управления загрузкой становится интерактивной.

Может кто-нибудь сообщить мне, почему такое поведение? Есть ли способ это исправить? Я бы предпочел заменить «div» на «a» вместо «span». Будет ли это нормально? или события щелчка вызовут какие-либо проблемы при обработке события?

 <html>
    <head>
        <style>
            .add-files{
                position:relative;
                overflow:hidden;
                width:100px;
                text-align:center;
                border:2px solid black;
            }

            .file-control{
                position:absolute;
                right:0;
                top:-4;
                z-index:1;
                font-size:50px;
                opacity:0;
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <div class="add-files">
            Add Files
            <input type="file" multiple="true" class="file-control">
        </div>
    </body>
</html>

Комментарии:

1. Какой-либо конкретный браузер, на который вы ориентируетесь?. Похоже, это работает в Firefox 3.x. Вы можете просмотреть его здесь

Ответ №1:

Я думаю, у вас возникнут проблемы с оформлением файла типа ввода, потому что браузеры обрабатывают тип ввода по-разному. В отличие от обычного ввода, разные браузеры добавляют разные вещи. Возможно, вам потребуется использовать другой метод добавления файлов.