1

Estoy teniendo problemas al cambiar el tamaño de letra de los inputs cuando se ingresa texto

Quiero que se cambie el tamaño de la letra del input al ingresar texto, pero al hacerlo también me cambia el tamaño del input, lo que debe ser diferente

¿Cómo puedo hacer para que al cambiar el tamaño de la letra del input al ingresar texto, no me cambie el tamaño del input?

Esto es lo que he hecho

.form-group input[type=text],
.form-group select{
    font-size: 12px;
    padding-left: 1em;
    padding-right: 1em;
    color: #C5CCE1;
    height: 1.875em;
    border-radius: 9px;
    outline: none;
    border: 1px solid #C0C8E7;
    width: 24.25em;
}
<div class="form-group">
    <input type="text" name="mdl_add_nombre" id="mdl_add_nombre" class="mdl_input_proveedor">
    <label>Nombre de Proveedor</label>
</div>

<div class="form-group">
    <select name="mdl_add_nacionalidad" id="mdl_add_nacionalidad" class="mdl_input_proveedor">
        <option value="">>> Seleccione una opción</option>
        <option value="">Internacional</option>
        <option value="">Nacional</option>
    </select>
    <label>Nacionalidad</label>
</div>

2
  • 1
    Estas usando como unidad de medidad em la cual es relativa al tamaño de letra del elemento, deberías considerar usar otra unidad como rem, px etc.
    – Marcos
    Commented el 27 mar. 2023 a las 16:10
  • Gracias. No había tomado eso en cuenta. Funciona ahora Commented el 27 mar. 2023 a las 17:28

1 respuesta 1

1

la unidad de medida em se basa al tamaño de texto actual, por lo que quiere decir que si tu tamaño de letra es más grande, el tamaño del input también va a ser afectada.

Tendrías que usar la unidad de medida px, en donde haciendo la conversión de 1.875em a px sería 30px, ejemplo:

.form-group input[type=text],
.form-group select{
  font-size: 25px;
  padding-left: 1em;
  padding-right: 1em;
  color: #C5CCE1;
  height: 30px;
  border-radius: 9px;
  outline: none;
  border: 1px solid #C0C8E7;
  width: 24.25em;
}
<div class="form-group">
  <input type="text" name="mdl_add_nombre" id="mdl_add_nombre" class="mdl_input_proveedor">
  <label>Nombre de Proveedor</label>
</div>

<div class="form-group">
  <select name="mdl_add_nacionalidad" id="mdl_add_nacionalidad" class="mdl_input_proveedor">
    <option value="">>> Seleccione una opción</option>
    <option value="">Internacional</option>
    <option value="">Nacional</option>
  </select>
  <label>Nacionalidad</label>
</div>

1
  • 1
    Ahora si, logré hacerlo. Exactamente era por las unidades de medida. Gracias Commented el 27 mar. 2023 a las 17:29

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.