Utilize the :read-only pseudo-selector to shift the placeholder upwards.
.myinput input:read-only + .floating-label
Remember: you have the option to swap out the general sibling ~ combinator with the adjacent sibling + combinator, as the .floating-label follows right after the input.
Sample:
.myinput input:focus {
outline: none;
}
.myinput {
position: relative;
width: 100%;
}
.myinput .inputText {
width: 100%;
outline: none;
border: none;
border-bottom: 1px solid #ccc;
box-shadow: none !important;
border-radius: unset !important;
}
.myinput .inputText:focus {
border-color: #3399FF;
border-width: medium medium 2px;
}
.myinput .floating-label {
position: absolute;
pointer-events: none;
top: 25px;
left: 0;
transition: 0.2s ease all;
color: #aaa;
}
.myinput input:focus + .floating-label,
.myinput input:not(:placeholder-shown):not(:focus):valid + .floating-label,
.myinput input:read-only + .floating-label {
top: 0px;
left: 0;
font-size: 13px;
opacity: 1;
color: #3399FF;
}
<div class="myinput">
<br>
<input type="text" name="coupon" class="inputText" value="Read Only" placeholder="" readonly>
<span class="floating-label">Enter Coupon Code</span>
</div>
<div class="myinput">
<br>
<input type="text" name="coupon" class="inputText" placeholder=" ">
<span class="floating-label">Enter Coupon Code</span>
</div>