Не работает css на элементе input type=file

@Pb-BASS · Регистрация: 21.02.2019

Author24 — интернет-сервис помощи студентам

Доброго времени суток.
Подскажите, как мне правильно подключить css к элементу input с type равным file.
Для других input с типом button стили применяются успешно.

Не работает css на элементе input type=file

Как сделать так, что бы верхняя кнопка отображалась так же как и нижняя?

Мой css

CSS    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
.dws-btn{
    width: 100%;
    padding: 10px 30px;
    margin: 5px 0 20px 0;
    font-family: Calibri;
    font-size: 24px;
    font-style: italic;
    color: black;
    background-color: rgb(250, 246, 2); 
    border: none;
    border-bottom: 4px solid  #B9B29F;
    cursor: pointer;
}

Кусочек разметки

HTML5    
        
    Скопировано
1
2
<input type="file" class= "dws-btn" id="photoLoader" value="input file" >
<input type="button" class= "dws-btn" value="input button" >

@sash23 · 04.09.2020, 11:21

input file не получится так стилизовать. оберните его в label и скройте и стилизуйте уже элемент label.

@Pb-BASS · 04.09.2020, 11:43 **[ТС]**

Сообщение от sash23

оберните его в label и скройте и стилизуйте уже элемент label.

Можете проверить, визуально вроде все работает, но может что-то не учел

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег LABEL</title>
  <style>
    .notVisible{
        display: none;
    }
    
    .dws-btn{
        width: 100%;
        padding: 10px 30px;
        margin: 5px 0 20px 0;
        font-family: Calibri;
        font-size: 24px;
        font-style: italic;
        color: black;
        background-color: rgb(250, 246, 2); 
        border: none;
        border-bottom: 4px solid  #B9B29F;
        cursor: pointer;
    }
  </style>
 </head>
 <body>
   <input type="file" id="fileInput" class="notVisible">
   <label for="fileInput" class="dws-btn">Input file</label>
 </body>
</html>

@sash23 · 04.09.2020, 11:58

Сообщение от Pb-BASS

Можете проверить, визуально вроде все работает, но может что-то не учел

Норм

Новые блоги и статьи Все статьи Все блоги /
Как использовать Behavior Graph в Unity при создании игрового AI GameUnited 14.04.2025 Искусственный интеллект в играх прошел долгий путь эволюции. От простейших алгоритмов, движущих призраками в Pac-Man, до сложных систем, управляющих поведением персонажей в современных AAA-проектах. . . .	Создание и стилизация списков в SwiftUI mobDevWorks 14.04.2025 Списки — фундаментальный элемент мобильных интерфейсов. От списка контактов до ленты новостей, от настроек до каталога товаров — трудно представить приложение, которое не использовало бы этот. . .	Паттерн SAGA и распределённые транзакции в микросервисной архитектуре stackOverflow 14.04.2025 Переход от монолитной архитектуры к микросервисам принес множество преимуществ: гибкость разработки, независимость развертывания и масштабирования отдельных компонентов. Однако этот переход создал и. . .	Кастомные аллокаторы в C++ и оптимизация управления памятью bytestream 14.04.2025 Работа с памятью в С++ всегда была и остаётся одной из самых увлекательных и сложных задач для программиста. Любой опытный C++ разработчик подтвердит: стандартные механизмы аллокации памяти – штука. . .	Организация сетей в Kubernetes и эффективное развертывание Mr. Docker 14.04.2025 Сетевая инфраструктура Kubernetes представляет собой сложную, но хорошо спроектированную систему, которая позволяет контейнерам взаимодействовать между собой и с внешним миром. За кажущейся простотой. . .
Многопоточность в Rust: Fearless concurrency и практические примеры golander 14.04.2025 Многопоточное программирование связано с рядом известных проблем. Наиболее распространенные из них — гонки данных (data races), взаимные блокировки (deadlocks) и условия гонки (race conditions). Эти. . .	Списки и кортежи в Python: различия, особенности, применение py-thonny 13.04.2025 Python славится своей гибкостью при работе с данными. В арсенале языка есть две основные последовательные структуры данных, которые программисты используют ежедневно — списки и кортежи. Эти структуры. . .	Middleware в ASP.NET Core UnmanagedCoder 13.04.2025 В ASP. NET Core термин "middleware" занимает особое место. Что же это такое? Middleware представляет собой программные компоненты, которые формируют конвейер обработки HTTP-запросов в приложении. . . .	Таблицы лута в Unity с MinMaxCurve и AnimationCurve GameUnited 12.04.2025 Создание сбалансированного лута в играх — задача не из простых. Разработчики постоянно ищут способы настройки систем выпадения предметов, которые будут одновременно справедливыми для игроков и. . .	std::expected в C++: Управление ошибками bytestream 12.04.2025 Обработка ошибок всегда была важной и одновременно сложной задачей в программировании на C++. На протяжении долгого времени разработчики использовали различные подходы: возвращаемые коды ошибок,. . .

@sash23 561 / 408 / 259 Регистрация: 31.05.2016 Сообщений: 1,102
	04.09.2020, 11:21
	Сообщение было отмечено Pb-BASS как решение Решение input file не получится так стилизовать. оберните его в label и скройте и стилизуйте уже элемент label. 1

@sash23 561 / 408 / 259 Регистрация: 31.05.2016 Сообщений: 1,102
	04.09.2020, 11:58
	Сообщение от Pb-BASS Можете проверить, визуально вроде все работает, но может что-то не учел Норм 1

Не работает css на элементе input type=file

Решение