Del modo que lo tienes debería ser funcional así.
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>