10

Estoy intentando quitar los bordes del input cuando este focuseado o activo, pero no funciona de ninguna manera estoy usando bootstrap y sass, pero de ninguna forma esta funcionando aqui muestro lo que quiero.

introducir la descripción de la imagen aquí

Deseao quitar el borde amarillo-rojo-verde que aparece ahi cuando se le de click para escribir

<div class="row">
       <div class="form-group mx-auto">
             <input type="email" class="form-control-lg border-0" placeholder="Correo Electronico">
       </div>

 </div>

Estilos

.form-control-lg {
            background: $main-color-l;
            border-bottom: 2px solid $shadow-green !important;
            color: white;
            margin-top: 10px;

            &:focus {
                border: none;
            }

            &:active {
                border: none;
            }
        }
0

1 respuesta 1

15

Salvo que tengas los estilos de bootstrap después de los que deseas aplicar de manera personalizada; es decir:

El orden de tus códigos CSS debería estar así:

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="misestilos.css">

Para que de este modo si tienes tú código organizado así, los últimos en aplicarse sean los estilos personalizados

Ahora con CSS tendrías un input así:

<input type="email" class="form-control-lg border-0" placeholder="Correo Electronico">

Posterior con CSS modificamos su apariencia de este modo:

.form-control-lg{
      border: 1px solid red;
      outline: none;
}
  • Usamos la pseudoclase :focus para identificar cuando la caja de texto se le ha dado click y esta disponible para escritura
  • Con outline: none; quitamos el borde por defecto que se coloca cuando ponemos el cursor del mouse
  • Con border: 1px solid red; solo estamos poniendo un color distinto que haga que se note el cambio

Ejemplo completo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="">
      <title>Ejemplo</title>
      <style>
        .form-control-lg{
          border: solid 1px blue;
        }
        .form-control-lg:focus{
          border: 1px solid red;
          outline: none;
        }
      </style>
    </head>
    <body>
    <input type="text" class="form-control-lg">
    </body>
    </html>

1
  • 1
    Gracias, muy buena respuesta, no tenia conocimiento del outline Commented el 9 sept. 2019 a las 2:51

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.