как сделать псевдоэлемент :before видимым, а основной элемент скрыть?

174

11 июля 2019, 04:00

Пытаюсь сделать вместо стандартного поля для загрузки файла просто квадратик. Для этого использую псевдоэлемент :before. Но при установке свойства display:none основного элемента этот псевдоэлемент тоже пропадает. Как исправить?

<input type="file" class="photo">

css

.photo{
display:none;
}
.photo:before{
content:'';
width:128px;
height:110px;
border:1px dashed var(--divider-color);
border-radius: 3px;
margin:20px 40px 0 0;
display:flex;
justify-content: center;
align-items:center;
}

Answer 1

Как вариант, можно сделать без псевдоэлементов (когда-то таким способом пользовался):

input { 
  display: none; 
} 
 
.photo { 
  background: green; 
  width: 100px; 
  height: 100px; 
  display: block; 
}

<label class="photo"> 
  <input type="file"> 
</label>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать рамки вокруг блока разного цвета?

Как сделать рамки блока как на рисунке?

142

ошибка со Swagger

подключил =>

149

Как создать экземпляр структуры?

У меня есть структура и интерфейс, подскажите как я могу создать экземпляр этой структуры

134

c# обращение к переменной bool из другого класса

Есть класс newgen с переменными bool, перекреплен к объектам, а эти объекты лежат в массиве другого класса sectionКак правильно обратиться к переменным...

179