Del modo que lo tienes debería ser funcional así. Salvo que tengas los estilos de bootsrap 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"> 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** <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <!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> <!-- end snippet -->