0

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.

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

1
  • ¿Podrías poner tu HTML?
    – Kiko_L
    Commented el 11 dic. 2018 a las 15:21

2 respuestas 2

3

Esto solo es posible si cambias el orden de los elementos ya que en css los selectores pueden ser los hermanos siguientes o los hijos, no puedes devolverte a un nivel superior (padre) o a un hermano anterior por lo que la solución que te presento es cambiando el orden de li e input y para que el elemento li siga estando a la izquierda le agrego float left

.form-input li {
  float: left;
  margin-right: 4px;
}

.form-input input:focus, .form-input input:focus + i  {
  color: red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

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

1
  • Para complementar la respuesta añadiría que si desea mantener el orden de los elementos (que el li se pinte antes que el input) puede jugar con display: flex y order. jsfiddle.net/fdbjvs92
    – phpMyGuel
    Commented el 11 dic. 2018 a las 16:02
2

Debes usar un selector adyacente (+) para escoger a los elementos que sean hermanos del input. Algo así:

div > input:focus + li {
  background-color:#F00;
}

El problema de este selector es que solo busca los elementos hermanos que están después del primer selector (en este caso div > input:focus). Para hacerlo funcionar como quieres, es necesario modificar el HTML, para poner el li después del input y ajustarlo después por CSS.

Algo así: https://jsfiddle.net/b2scp8zr/1/

Para el caso de la pregunta quedaría así:

.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: absolute;
      left: 0;
	}
	.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);

	}
  
  	.campos_login > div input:focus + li, .campos_login > div input:focus {
		background-color: #F00;

	}
<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>
				<input type="text" name="">
        <li class="fa fa-user"></li>
			</div>
			<div>
				<input type="password" name="">
        <li class="fas fa-key"></li>
			</div>
		</div>
</div>

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.