1

Necesito crear un fondo con formato elíptico dentro de un text input, pero no lo estoy logrando hacer.

   .circle-icon {
    color:#fff;    
    background: #009640;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

y el HTML

<div class="input-group">
<input class="form-control rounded-pill py-2 pr-5 mr-1 bg-transparent" required type="text" name="search"
       placeholder="Buscar ...">
<span class="input-group-append">
    <div class="input-group-text border-0 bg-transparent ml-n5">
        <i class="lnr lnr-magnifier circle-icon"></i>
    </div>
 </span>

estos son mis resultados hasta ahora introducir la descripción de la imagen aquí y a esto debería llegar

introducir la descripción de la imagen aquí

alguna idea? gracias de antemano

1
  • tal vez con un largo de mas de 30px
    – 404
    el 31 mar. 2020 a las 19:10

1 respuesta 1

0

En lugar de definir width y height prueba utilizando las siguientes propiedades:

  • line-height: sustituye al height, dara la altura que necesitas centrando el texto verticalmente.
  • padding: al definir el padding que ha de tener a los dados el texto estara en el centro. El border-radius deberia ser el mismo valor que el padding que uses horizontal para conseguir mas o menos lo que buscas
.circle-icon {
  color:#fff;    
  background: #009640;
  padding: 0 20px;
  line-height: 30px;
  border-radius: 20px;
}
1
  • ahi queda con el formato que necesito, pero me queda la mitar afuera del input, alguna idea? el 31 mar. 2020 a las 21:11

Tu Respuesta

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

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