ファイル選択ボタンのデザインをカスタマイズするツール

<input type="file" class="custom-file-input">

.custom-file-input::file-selector-button {
	background-color: {{btn_bg_color}};
	color: {{btn_text_color}};
	font-size: {{btn_font_size}}px;
	padding: {{btn_padding_y}}px {{btn_padding_x}}px;
	border-radius: {{btn_border_radius}}px;
	border: none;
	cursor: pointer;
	margin-right: 15px;
	transition: background-color 0.3s;
}

.custom-file-input::file-selector-button:hover {
	background-color: {{btn_hover_bg_color}};
}

.custom-file-input::file-selector-button:active {
	background-color: {{btn_active_bg_color}};
}