How to customize the choose file button in iOS devices

In Ios devices shows the buttons in different UI for choose file input type file by using this method we can customize the choose file buttons.

<section class="order-history-details-order-uploadCheck">
    <div class="popup" id="popup">
        <div class="file-upload">
			<div class="file-select">
					<div class="file-select-button" id="fileName">Choose File</div>
        <input type="file" data-action="input-action" name="Check-input-file" id="in-modal-Check-input-file"
            accept="image/png, image/jpeg">
        </div>
    </div>
        <input type="text" name="Check-input" id="in-modal-Check-input" hidden>
        <input type="text" name="Invoice-input" id="invoice-input" hidden>
        <br>
        <input data-action="check-submit-action" id="check-submit-btn" type="submit" value="Submit" class="order-history-summary-button-uploadCheck">
       
        <div>
            <small class="msgafteruploadCheckfield"></small>
            <small class="msguploadCheckfield"></small>
            <small class="fileCheckformaterrormessage"></small>
        </div>
    </div>

</section>

 
.file-upload .file-select{
	display: block;
    border: 1.5px solid #eeeeee;
    color: #34495e;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    text-align: left;
    background: #FFFFFF;
    overflow: hidden;
}
.file-upload .file-select .file-select-button{
	background: #eeeeee;
    padding: 2px 7px 2px 7px;
    display: inline;
    height: 40px;
    line-height: 40px;
    color: #4D5256;
    font-size: 1rem;
    border: 1px solid #707070;
    margin-left: 11px;
}
.file-upload .file-select .file-select-name
{
	line-height:40px;
	display:inline-block;
	padding:0 5px;
}
.file-upload .file-select
{
	transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}
.file-upload .file-select:hover .file-select-button
{transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}
.file-upload.active .file-select
{transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}
.file-upload.active .file-select .file-select-button
{
	color:#FFFFFF;
	transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}
.file-upload .file-select input[type=file]
{
	z-index: 100;
    cursor: pointer;
    position: relative;
    height: 105%;
    width: 101%;
    top: -41px;
    left: 25px;
    opacity: 1;
	border: none;
}
input::file-selector-button {

    opacity: 0 !important;

}
.file-upload .file-select.file-select-disabled
{
	opacity:0.65;
}
.file-upload .file-select.file-select-disabled
{
	cursor:default;
	display:block;
	border: 2px solid #dce4ec;
	color: #34495e;
	cursor:pointer;
	height:40px;
	line-height:40px;
	margin-top:5px;
	text-align:left;
	background:#FFFFFF;
	overflow:hidden;
	position:relative;
}
.file-upload .file-select.file-select-disabled .file-select-button
{
	background:#dce4ec;
	color:#666666;
	padding:0 10px;
	display:inline-block;
	height:40px;
	line-height:40px;
}
.file-upload .file-select.file-select-disabled .file-select-name
{
	line-height:40px;
	display:inline-block;
	padding:0 10px;
}