Skip to main content
se añadieron 2715 caracteres en el cuerpo
Origen Enlace
cleanet
  • 105
  • 2
  • 14

El HTML es el siguiente:

    .fondo_login{
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 999999;
        display: none;
    }
    *{
        margin:0;
    }
    .login{
        border: 0.5px solid black;
        margin: 10% auto;
        position: relative;
        width: 30%;
        height: 70%;
        display: block;
        border-radius: 10px;
        background: rgba(128, 128, 128,0.7);
        box-shadow: 1px 5px 10px rgba(0,0,0,0.5), 0 15px 5px -10px rgba(255,255,255,.3) inset;
    }
    .login > p{
        text-align: center;
        margin: 2% 0%;
        font-size: 2vw;
        color: rgba(255,255,255,0.8);
        padding: 2%;
        text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
    }
    .login p i{
        position: absolute;
        margin: 0 0 0 30%;
        font-size: 2vw;
        color: #717171;
        filter: drop-shadow(0px 1px 0px rgba(255,255,255,0.5));
        top: 3.8%;
        cursor:pointer;
    }
    .login .linea_bottom{
        background-color: black;
        border-style: none;
        height: 0.5px;
        box-shadow: 0px 1px 1px white;
    }
    .campos_login > div li{
        color: rgba(255,255,255,.5);
        padding: 5%;
        font-size: 2vw;
        border-radius: 5px 0 0 5px;
        box-shadow: 1px 3px 2px rgba(0,0,0,.2) inset, 0px 0.5px 0px rgba(255,255,255,.5);
        position: relative;
    }
    .campos_login > div input{
        font-size: 1.5vw;
        width: 80%;
        padding: 5.6%;
        border: none;
        background: transparent;
        box-shadow: -2px 3px 2px rgba(0,0,0,.2) inset, 0px 0.5px 0px rgba(255,255,255,.5);
        border-radius: 0px 5px 5px 0px;
        color: #e2e2e2;
    }
    .campos_login > div input:focus{
        outline-style: none;
    }
    .campos_login > div input[type="password"]{
        padding: 5.55%;
    }
    .campos_login{
        position: relative;
        width: 80%;
        margin: 10% auto;
    }
    .campos_login > div{
        position: relative;
        padding: 10% 0;
      display:inline-flex;
    }
    .campos_login > div input:hover + .campos_login > div li + .campos_login div input{
        background: rgba(0,0,0,.15);

    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>


<div class="login">
        <p>Login<i class="fas fa-times close_login"></i></p>
        <hr class="linea_bottom">
        <div class="campos_login">
            <div>
                <li class="fa fa-user"></li>
                <input type="text" name="">
            </div>
            <div>
                <li class="fas fa-key"></li>
                <input type="password" name="">
            </div>
        </div>
</div>
<div class="login">
    <p>Login<i class="fas fa-times close_login"></i></p>
    <hr class="linea_bottom">
    <div class="campos_login">
        <div>
            <li class="fa fa-user"></li>
            <input type="text" name="">
        </div>
        <div>
            <li class="fas fa-key"></li>
            <input type="password" name="">
        </div>
    </div>
</div>
 

El HTML es el siguiente:

<div class="login">
    <p>Login<i class="fas fa-times close_login"></i></p>
    <hr class="linea_bottom">
    <div class="campos_login">
        <div>
            <li class="fa fa-user"></li>
            <input type="text" name="">
        </div>
        <div>
            <li class="fas fa-key"></li>
            <input type="password" name="">
        </div>
    </div>
</div>

    .fondo_login{
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 999999;
        display: none;
    }
    *{
        margin:0;
    }
    .login{
        border: 0.5px solid black;
        margin: 10% auto;
        position: relative;
        width: 30%;
        height: 70%;
        display: block;
        border-radius: 10px;
        background: rgba(128, 128, 128,0.7);
        box-shadow: 1px 5px 10px rgba(0,0,0,0.5), 0 15px 5px -10px rgba(255,255,255,.3) inset;
    }
    .login > p{
        text-align: center;
        margin: 2% 0%;
        font-size: 2vw;
        color: rgba(255,255,255,0.8);
        padding: 2%;
        text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
    }
    .login p i{
        position: absolute;
        margin: 0 0 0 30%;
        font-size: 2vw;
        color: #717171;
        filter: drop-shadow(0px 1px 0px rgba(255,255,255,0.5));
        top: 3.8%;
        cursor:pointer;
    }
    .login .linea_bottom{
        background-color: black;
        border-style: none;
        height: 0.5px;
        box-shadow: 0px 1px 1px white;
    }
    .campos_login > div li{
        color: rgba(255,255,255,.5);
        padding: 5%;
        font-size: 2vw;
        border-radius: 5px 0 0 5px;
        box-shadow: 1px 3px 2px rgba(0,0,0,.2) inset, 0px 0.5px 0px rgba(255,255,255,.5);
        position: relative;
    }
    .campos_login > div input{
        font-size: 1.5vw;
        width: 80%;
        padding: 5.6%;
        border: none;
        background: transparent;
        box-shadow: -2px 3px 2px rgba(0,0,0,.2) inset, 0px 0.5px 0px rgba(255,255,255,.5);
        border-radius: 0px 5px 5px 0px;
        color: #e2e2e2;
    }
    .campos_login > div input:focus{
        outline-style: none;
    }
    .campos_login > div input[type="password"]{
        padding: 5.55%;
    }
    .campos_login{
        position: relative;
        width: 80%;
        margin: 10% auto;
    }
    .campos_login > div{
        position: relative;
        padding: 10% 0;
      display:inline-flex;
    }
    .campos_login > div input:hover + .campos_login > div li + .campos_login div input{
        background: rgba(0,0,0,.15);

    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>


<div class="login">
        <p>Login<i class="fas fa-times close_login"></i></p>
        <hr class="linea_bottom">
        <div class="campos_login">
            <div>
                <li class="fa fa-user"></li>
                <input type="text" name="">
            </div>
            <div>
                <li class="fas fa-key"></li>
                <input type="password" name="">
            </div>
        </div>
</div>
 

se añadieron 30 caracteres en el cuerpo
Origen Enlace
cleanet
  • 105
  • 2
  • 14

Hola estoy haciendo un "login", con usuario y contraseña y quisiera saber como hacer para que cuando hago focus en un input, me cambie el background de dos elementos. Lo he intentado así pero no me funciona.

.campos_login > div input:focus, .campos > div input, campos > div li {
     background:rgba(0,0,0,.5);
}

Lo que quiero hacer, es que cuando el input este en modo focus, quisiera que el fondo del input se cambie y la etiqueta li tambien (es decir el fondo del icono), mas o menos sería esta idea.

Y meLa imagen es el modelo que estoy haciendo, pero no es mi login.

Mi problema es que no sé que selector poner.

El HTML es el siguiente:

<div class="login">
    <p>Login<i class="fas fa-times close_login"></i></p>
    <hr class="linea_bottom">
    <div class="campos_login">
        <div>
            <li class="fa fa-user"></li>
            <input type="text" name="">
        </div>
        <div>
            <li class="fas fa-key"></li>
            <input type="password" name="">
        </div>
    </div>
</div>

Hola estoy haciendo un "login", con usuario y contraseña y quisiera saber como hacer para que cuando hago focus en un input, me cambie el background de dos elementos. Lo he intentado así pero no me funciona.

.campos_login > div input:focus, .campos > div input, campos > div li {
     background:rgba(0,0,0,.5);
}

Lo que quiero hacer, es que cuando el input este en modo focus, quisiera que el fondo del input se cambie y la etiqueta li tambien (es decir el fondo del icono), mas o menos sería esta idea.

Y me problema es que no sé que selector poner.

El HTML es el siguiente:

<div class="login">
    <p>Login<i class="fas fa-times close_login"></i></p>
    <hr class="linea_bottom">
    <div class="campos_login">
        <div>
            <li class="fa fa-user"></li>
            <input type="text" name="">
        </div>
        <div>
            <li class="fas fa-key"></li>
            <input type="password" name="">
        </div>
    </div>
</div>

Hola estoy haciendo un "login", con usuario y contraseña y quisiera saber como hacer para que cuando hago focus en un input, me cambie el background de dos elementos. Lo he intentado así pero no me funciona.

.campos_login > div input:focus, .campos > div input, campos > div li {
     background:rgba(0,0,0,.5);
}

Lo que quiero hacer, es que cuando el input este en modo focus, quisiera que el fondo del input se cambie y la etiqueta li tambien (es decir el fondo del icono), mas o menos sería esta idea.

La imagen es el modelo que estoy haciendo, pero no es mi login.

Mi problema es que no sé que selector poner.

El HTML es el siguiente:

<div class="login">
    <p>Login<i class="fas fa-times close_login"></i></p>
    <hr class="linea_bottom">
    <div class="campos_login">
        <div>
            <li class="fa fa-user"></li>
            <input type="text" name="">
        </div>
        <div>
            <li class="fas fa-key"></li>
            <input type="password" name="">
        </div>
    </div>
</div>
se añadieron 30 caracteres en el cuerpo
Origen Enlace
cleanet
  • 105
  • 2
  • 14

Hola estoy haciendo un "login", con usuario y contraseña y quisiera saber como hacer para que cuando hago focus en un input, me cambie el background de dos elementos. Lo he intentado así pero no me funciona.

.campos_login > div input:focus, .campos > div input, campos > div li {
     background:rgba(0,0,0,.5);
}

Lo que quiero hacer, es que cuando el input este en modo focus, quisiera que el fondo del input se cambie y la etiqueta li tambien (es decir el fondo del icono), mas o menos sería esta idea.

Y me problema es que no sé que selector poner.

El HTML es el siguiente:

<div class="login">
    <p>Login<i class="fas fa-times close_login"></i></p>
    <hr class="linea_bottom">
    <div class="campos_login">
        <div>
            <li class="fa fa-user"></li>
            <input type="text" name="">
        </div>
        <div>
            <li class="fas fa-key"></li>
            <input type="password" name="">
        </div>
    </div>
</div>

Hola estoy haciendo un "login", con usuario y contraseña y quisiera saber como hacer para que cuando hago focus en un input, me cambie el background de dos elementos. Lo he intentado así pero no me funciona.

.campos_login > div input:focus, .campos > div input, campos > div li {
     background:rgba(0,0,0,.5);
}

Lo que quiero hacer, es que cuando el input este en modo focus, quisiera que el fondo del input se cambie y la etiqueta li tambien, mas o menos sería esta idea.

Y me problema es que no sé que selector poner.

Hola estoy haciendo un "login", con usuario y contraseña y quisiera saber como hacer para que cuando hago focus en un input, me cambie el background de dos elementos. Lo he intentado así pero no me funciona.

.campos_login > div input:focus, .campos > div input, campos > div li {
     background:rgba(0,0,0,.5);
}

Lo que quiero hacer, es que cuando el input este en modo focus, quisiera que el fondo del input se cambie y la etiqueta li tambien (es decir el fondo del icono), mas o menos sería esta idea.

Y me problema es que no sé que selector poner.

El HTML es el siguiente:

<div class="login">
    <p>Login<i class="fas fa-times close_login"></i></p>
    <hr class="linea_bottom">
    <div class="campos_login">
        <div>
            <li class="fa fa-user"></li>
            <input type="text" name="">
        </div>
        <div>
            <li class="fas fa-key"></li>
            <input type="password" name="">
        </div>
    </div>
</div>
Origen Enlace
cleanet
  • 105
  • 2
  • 14
Loading