如何将PWA中input文件选择框的默认图标替换为自定义背景图

原生文件选择输入框的默认按钮、提示文字属于浏览器内置的Shadow DOM元素，无法通过普通CSS直接修改样式，推荐使用label关联输入框的方案实现自定义样式，完全满足你只展示自定义背景图的需求，也不会影响原有上传逻辑：

1. 修改HTML结构 #

给input外层新增关联的label元素作为自定义点击区域，原有input的逻辑完全保留：

<div *ngSwitchCase="'false'">
    <!-- 新增label关联input的id，作为自定义样式载体 -->
    <label class="custom_upload_trigger" for="capture"></label>
    <ion-input class="input_pic" type="file"
    id="capture"
    accept="image"
    capture (change)="uploadFromFile($event, 'photo1')"></ion-input>              
</div>

2. 修改CSS样式 #

隐藏原生input，给label设置你需要的背景图样式：

/* 隐藏原生文件输入框 */
.input_pic {
    display: none !important;
}

/* 自定义触发按钮样式 */
.custom_upload_trigger {
    display: inline-block;
    /* 根据你的设计需求调整宽高 */
    width: 60px;
    height: 60px;
    background-image: url("../../../assets/image/SpaghettiPlus2.png") !important;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}

补充说明 #

如果你的场景需要保留input的可聚焦性（比如适配无障碍需求），可以将隐藏input的样式替换为如下代码，既看不见原生控件，又能保留焦点能力：

.input_pic {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

内容的提问来源于stack exchange，提问作者D.Hodges