Стилизация файла типа ввода не работает
Я пытаюсь стилизовать входной «файл» на своей веб-странице, но у меня продолжают возникать проблемы с кнопкой этого ввода. Отображаемый результат выглядит следующим образом:
Результат, которого я хочу достичь, - это кнопка отправки под кнопкой «Выбрать файл». Проблема в том, что я не могу оформить кнопку как «Выбрать файл», и когда я пытаюсь изменить цвет входного файла, он меняет фон, а не саму кнопку. Код, который я использую для кнопки «Выбрать файл», следующий:
input[type=file] {
border-radius: 4px;
border-color: $blue;
background-color: $blue;
border-width: 1px;
width: 100%;
-webkit-file-upload-button: hidden;
height: $base-spacing*2;
white-space: nowrap;
display: inline-flex;
align-items: center;
align-content: center;
text-align: center;
cursor: pointer;
line-height: 1.6rem;
font-size: 1.1rem;
}
Код HTML:
<div>
<label for = "Image" class = "col-md-4 col-form-label text-md-right">
{{ __('Upload Image') }}:
</label>
<br />
<input id = "Image" type = "file" class = "form-control-image{{ $errors->has('Image') ? ' is-invalid' : '' }}"
name = "image_reference">
@if ($errors->has('image_reference'))
<span class = "invalid-feedback" role = "alert">
<strong>{{ $errors->first('image_reference') }}</strong>
</span>
@endif
</div>
Может ли кто-нибудь помочь мне понять, как я могу исправить стиль кнопки «Выбрать файл»?
Спасибо вам всем.
Ответы 2
Мы не можем сделать большую настройку ввода файла. Но у вас есть варианты, как показано ниже.
Примечание. Я использовал Bootstrap для некоторых классов, так как ваш код использует его. Но если вы хотите, у вас также могут быть пользовательские классы.
Одним из недостатков является то, что информация о выбранном файле также скрыта. Если вы хотите, вы можете получить это с помощью JavaScript и показать под кнопкой.
input[type='file'] {
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
}<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
<label>
<input id = "Image" type = "file" class = "form-control-image" name = "image_reference">
<span class = "btn btn-primary">File button</span>
</label>
<br />
<br />
<button class = "btn btn-primary form-control-image">Submit</button>Теперь для этого есть селектор :: кнопка выбора файла
Нашел ответ здесь: Стилизация кнопки input type="file"
input[type=file]::file-selector-button {
align-content: center;
align-items: center;
border-radius: 4px;
border-color: $blue;
background-color: $blue;
border-width: 1px;
cursor: pointer;
display: inline-flex;
font-size: 1.1rem;
height: $base-spacing*2;
line-height: 1.6rem;
text-align: center;
white-space: nowrap;
width: 100%;
}