0

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?

2
  • Como puedes hacer que? Cual estilo quieres aplicar? En que momento precisamente?
    – IvanS95
    Commented el 18 mar. 2019 a las 15:36
  • El primer parámetro, por ejemplo, tiene un estilo, el de --Prefix, pero solo se muestra cuando se muestra el dropdown, no cuando lo selecciono.
    – Yuna Sch
    Commented el 18 mar. 2019 a las 15:37

1 respuesta 1

2

Si quieres aplicar el mismo estilo de los elementos option en el select, nada mas tienes que, en tu caso, aplicar la misma clase al select como tal; ya que son dos elementos por separado, cada uno con sus estilos.

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 title-form" 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>

2
  • Muchísimas gracias!
    – Yuna Sch
    Commented el 18 mar. 2019 a las 15:48
  • No hay porque :) si te sirvio recuerda marcar la respuesta como aceptada con el check
    – IvanS95
    Commented el 18 mar. 2019 a las 15:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.