When a user views input group text from a mobile device they cannot see what they are typing.
How can I resolve this issue?
body {
background-color: lightgreen;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}<div class="col-lg-12 row">
<div class="col-lg-6 mb-3">
<label><b> Facebook</b></label>
<div class="input-group-prepend">
<span class="input-group-text" style="min-width: 250px; display: inline-block;">https://www.facebook.com/</span>
<input class="from-control" type="text" id="fb" autocomplete="off" onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 48 && event.charCode <= 57) || (event.charCode >= 97 && event.charCode <= 122) && (event.charCode != 32))">
</div>
</div>
<div class="col-lg-6 mb-3">
<label><b> Instagram</b></label>
<div class="input-group-prepend">
<span class="input-group-text" style="min-width: 250px; display: inline-block;">https://www.instagram.com/</span>
<input class="from-control" type="text" id="ig" autocomplete="off" onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 48 && event.charCode <= 57) || (event.charCode >= 97 && event.charCode <= 122) && (event.charCode != 32))">
</div>
</div>
</div>