0

En este momento estoy trabajando con un estilo css que me permite darle una forma circular a los inputs, pero no me funciona bien con los selects, los items no se muestran cuando los selecciono y además me gustaría que la lista desplegable se muestre circular al igual que el select.

<style>
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6e707e;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d1d3e2;
    border-radius: 0.35rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control-user {
    font-size: 0.8rem;
    border-radius: 10rem;
    padding: 1.5rem 1rem;
}


</style>



<input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password" name="password" style="width: 250px; height:;">
<br>
<select class="form-control form-control-user" style="width: 250px;">
  <option selected>Select</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
</div>

El area desplegada enmarcada  en rojo me gustaría que se mostrara acorde al select.

Nota: No deseo involucrar JavaScript, y deseo conservar el estilo, al menos para mostrar el texto seleccionado.

1 respuesta 1

1

Empieza por quitar la sigiente linea al css del select:

padding: 1.5rem 1rem;

Con esto ya verás el contenido de los option, con el resto, no creo que se pueda hacer con css, seguramente lo encuentras con javascript pero no lo veo muy estético.

Si tu problema es con el tamaño, puedes quitar la linea:

height: calc(1.5em + 0.75rem + 2px);

Y dejar que el padding controle el alto de los inputs.

3
  • Está casi perfecto, el problema es que mira como se muestra i.imgur.com/IOq6JQA.png el 26 ago. 2020 a las 15:22
  • Lo que pasa es que le estas dando diferentes paddings y tienen un height, quítale ese height y dales el mismo padding a ambos
    – Elboy
    el 26 ago. 2020 a las 15:24
  • Listo, gracias, problema resuelto. Lo del select si veré entonces como lo resuelvo con javascript el 26 ago. 2020 a las 15:26

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.