I am utilizing CSS to make our placeholders jump up when clicked inside, but Edge is not recognizing the CSS. It works fine on every other browser except for Edge. I've tried various solutions but none seem to work on Edge. Any thoughts on what might be causing this issue?
"I have searched for similar articles here, but none of them are effective on the current version of Edge. I also attempted using : instead of :: at the ms- line, but that did not work either."
input {
padding:10px;
width:95%;
}
label {
margin:10px 0;
position:relative;
display:inline-block;
width:100%;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input:focus ~ span, input:not(:placeholder-shown) ~ span {
opacity:1;
transform:translateY(-100%) translateX(-10px);
font-size:10px;
padding:5px 10px;;
}
/* For IE Browsers*/
input:focus ~ span, input:not(:-ms-input-placeholder) ~ span {
opacity:1;
transform:translateY(-100%) translateX(-10px);
font-size:10px;
}<label>
<input type="password" name="E_password" value="" placeholder=" " />
<span>Password*</span>
</label>