La cosa es que cuando le añado el CSS a un option
se aplica solo con el dropdown. Entonces, me gustaría que apareciera también una vez se muestra el option
en la casilla del select
.
function showInp(){
getSelectValue = document.getElementById("telprefix").value;
if(getSelectValue=="and"){
document.getElementById("andphone").style.display = "block";
document.getElementById("andphone").setAttribute("required", "required");
document.getElementById("espphone").style.display = "none";
document.getElementById("frphone").style.display = "none";
}else if(getSelectValue=="esp"){
document.getElementById("andphone").style.display = "none";
document.getElementById("espphone").style.display = "block";
document.getElementById("espphone").setAttribute("required", "required");
document.getElementById("frphone").style.display = "none";
}else if(getSelectValue=="fr"){
document.getElementById("andphone").style.display = "none";
document.getElementById("espphone").style.display = "none";
document.getElementById("frphone").style.display = "block";
document.getElementById("frphone").setAttribute("required", "required");
}
else if(getSelectValue===""){
document.getElementById("andphone").style.display = "none";
document.getElementById("espphone").style.display = "none";
document.getElementById("frphone").style.display = "none";
}
}
.form-group {
padding: 20px;
letter-spacing: 0.1px;
text-transform: uppercase;
}
.title-form {
color: gray;
font-weight: bold;
}
.form-control{
border: none;
border-bottom: 1px solid #727272;
width: 100%;
height: 30px;
}
.form-control-phone, .form-control-option {
float: left;
border: none;
border-bottom: 1px solid #727272;
}
.form-control-phone {
display: none;
height: 30px;
margin-left: 10px;
}
<div class="form-group">
<label class="animated-label title-form" for="phone"><i class="fas fa-phone-square"></i> Teléfon de Contacte *</label><br>
<select name="telprefix" id="telprefix" class="form-control-option" required onchange="showInp()" style="width: 90px; height: 33px; margin: 0; padding: 0;">
<option value="" class="title-form">--Prefix</option>
<option value="and">+376</option>
<option value="esp">+34</option>
<option value="fr">+33</option>
</select>
<input id="andphone" class="form-control-phone" type="text" pattern="^[8|7|3|6]\d{5}$" />
<input id="espphone" class="form-control-phone" type="text" pattern="^[9|8|7|6]\d{8}$" />
<input id="frphone" class="form-control-phone" type="text" pattern="^[1|2|3|4|5|6]\d{9}$" />
</div><br>
<div class="form-group" style:"padding-top: 20px;">
<label class="animated-label title-form" for="message"><i class="fas fa-pencil-alt"></i> Missatge *</label><br>
<textarea id="message" class="form-control" name="message" style="max-width: 100%; min-width: 100%; min-height: 150px; max-height: 100%"></textarea>
</div>
¿Cómo puedo hacerlo?