devlev1980
2/13/2019 - 8:28 AM

Input File with Accecibility


          <div class="upload-btn-wrapper">
						<input type="file" name="myfile" id="uploadFile" (change)="uploadFile($event)" />
						<label for="uploadFile">
								<span class="btn-text">עיון</span>
							<img
                src="../../../../../assets/icons/{{ dialog.uploadIconSrc }}"
                alt="{{ dialog.uploadIconAlt }}"
              />
						</label>
          </div>
.upload-btn-wrapper input[type=file] {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	width: 100%;
	cursor: pointer;
	
}
.upload-btn-wrapper input[type=file]+label{
	background-color: transparent;
	border: 1px solid #2c7095;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3px 24px;
}
.upload-btn-wrapper input[type=file]:focus+label{
	outline: auto 1px -webkit-focus-ring-color;
}