Input css type file: html — How to customize ?

html — Не работает стилизация файла типа ввода

Задай вопрос

спросил 1 год, 11 месяцев назад

Изменено 1 год, 11 месяцев назад

Просмотрено 6к раз

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

Результат, которого я хочу добиться, — это кнопка отправки под кнопкой «Выбрать файл». Проблема в том, что я не могу стилизовать кнопку как «Выбрать файл», и когда я пытаюсь изменить цвет входного файла, он меняет фон, а не саму кнопку. Код, который я использую для кнопки «Выбрать файл», следующий:

 input[type=file] {
        радиус границы: 4px;
        цвет границы: $синий;
        цвет фона: $синий;
        ширина границы: 1px;
        ширина: 100%;
        -webkit-кнопка загрузки файла: скрыта;
        высота: $base-spacing*2;
        пробел: nowrap;
        дисплей: встроенный гибкий;
        выравнивание элементов: по центру;
        выровнять содержимое: по центру;
        выравнивание текста: по центру;
        курсор: указатель;
        высота строки: 1,6 бэр;
        размер шрифта: 1.  1rem;
    }
 

Код HTML:

 

            <метка для="Изображение">
                {{ __('Загрузить изображение') }}:
            
            

            <тип ввода="файл"
                имя = "изображение_ссылка">
            @if ($ errors-> has('image_reference'))
            <промежуток роли="предупреждение">
                {{ $errors->first('image_reference') }}
            
            @endif
        
 

Может ли кто-нибудь помочь мне понять, как исправить стиль кнопки «Выбрать файл»?

Всем спасибо.

• html
• sass

Мы не можем сильно настраивать ввод файла. Но у вас есть варианты, как показано ниже.

Примечание. Я использовал Bootstrap для некоторых классов, так как ваш код использует его. Но если вы хотите, у вас также могут быть пользовательские классы.

Одним из недостатков является то, что информация о выбранном файле также скрыта. Если вы хотите, вы можете получить это с помощью JavaScript и показать под кнопкой.

 ввод [тип = 'файл'] {
  ширина: 0;
  высота: 0;
  переполнение: скрыто;
  непрозрачность: 0;
} 

  
<метка>
  
  Кнопка "Файл"





Отправить 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как настроить ввод файлов

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

В этом фрагменте мы покажем, как можно настроить ввод файла без JavaScript.

• Используйте тег с именем класса «label».
• Добавить тип ввода «файл».
• Добавьте элемент .

 <метка>
  <тип ввода = "файл" требуется/>
  Выберите файл
 

• Используйте свойства position и top для файла label.label input[type=»file»].
• Стилизуйте класс «метка», используя свойства курсора, границы, радиуса границы, заполнения, поля и фона, и добавьте отображение.
• Добавьте псевдоклассы :hover и :active в класс «label» и добавьте фон.
• Добавьте псевдоклассы :invalid и :valid с интервалом в класс «метка» и установите цвет.

 label.label input[type="file"] {
  положение: абсолютное;
  верх: -1000px;
}
.этикетка {
  курсор: указатель;
  граница: 1px сплошная #cccccc;
  радиус границы: 5px;
  отступ: 5px 15px;
  поле: 5px;
  фон: #dddddd;
  отображение: встроенный блок;
}
. метка:наведите {
  фон: #5cbd95;
}
.метка: активный {
  фон: #9fa1a0;
}
.label: недействительный + диапазон {
  цвет: #000000;
}
.label:действительный+диапазон {
  цвет: #ffffff;
} 

Вот полный код.

Пример настройки ввода файла:

 

  <голова>
    
    <стиль>
      label.label input[type="file"] {
        положение: абсолютное;
        верх: -1000px;
      }
      .этикетка {
        курсор: указатель;
        граница: 1px сплошная #cccccc;
        радиус границы: 5px;
        отступ: 5px 15px;
        поле: 5px;
        фон: #dddddd;
        отображение: встроенный блок;
      }
      .метка:наведите {
        фон: #5cbd95;
      }
      .метка: активный {
        фон: #9fa1a0;
      }
      .label: недействительный + диапазон {
        цвет: #000000;
      }
      .label: допустимый + диапазон {
        цвет: #ffffff;
      }
    
  
  <тело>
    

      <метка>
        <тип ввода = "файл" требуется/>
        Выберите файл
      
    
  
 

Попробуй сам »

Результат

Выберите файл

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