Skip to main content
Publicación convertida en wiki de comunidad por user128299
se eliminaron 53 caracteres en el cuerpo
Origen Enlace
user128299
user128299

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>

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>

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>

se añadió 1 carácter en el cuerpo
Origen Enlace
user128299
user128299

Del modo que lo tienes debería ser funcional así.

Salvo que tengas los estilos de bootsrapbootstrap 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>

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">

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>

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>

se añadieron 122 caracteres en el cuerpo
Origen Enlace
user128299
user128299

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">

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>

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

    <!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>

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">

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>

Origen Enlace
user128299
user128299
Loading