1

Пытаюсь сделать вместо стандартного поля для загрузки файла просто квадратик. Для этого использую псевдоэлемент :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;
}
1
  • 1
    Здравствуйте. Вопрос в заголовке отличен от вашего примера кода. Вам с любым примером подойдёт вариант или именно с input type="file"? Дело в том, что стилизованный input type="file" вообще не реализуется так, как вы это предлагаете сделать, это сложнее: после добавления файла, его название где-то должно отображаться. Также зачастую добавляют кнопку удаления файла(крестик). Вот пример: стилизованная кнопка для загрузки файла: bit.ly/2rYrNoV а так выглядит после добавления файла: bit.ly/2rZVBSa Commented 28 дек. 2018 в 16:31

3 ответа 3

2

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

input {
  display: none;
}

.photo {
  background: green;
  width: 100px;
  height: 100px;
  display: block;
}
<label class="photo">
  <input type="file">
</label>

0

Можно использовать:

visibility:hidden 

вместо:

display:none

и в псевдоэлементах ставить visibility: visible.

0
<input type="file" class="photo" id="photo">
<label for="photo"><\label>
#photo {
    display: none;
}

label {
  background: green;
  width: 100px;
  height: 100px;
  display: block;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.