focus on an input and color several elements

Question

focus on an input and color several elements

Navigation

#1 by (3 votes)
#2 by (2 votes)

0

Hello, I'm doing a "login", with username and password and I would like to know how to do so that when I focus on an input, I change the background of two elements. I've tried like this but it does not work for me.

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

What I want to do, is that when the input is in focus mode, I would like the background of the input to be changed and the li tag too (that is, the background of the icon), more or less would this idea be.

The image is the model I'm doing, but it's not my login.

My problem is that I do not know what selector to put.

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

html css

asked by cat_12 11.12.2018 в 16:19

source

2 answers

3

This is only possible if you change the order of the elements since in css the selectors can be the following siblings or the children, you can not return to a higher level (father) or a previous sibling so the solution that you I present is changing the order of li e input and so that the element li remains on the left I add 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>

answered by 11.12.2018 в 16:55

How to concatenate results of a For in Javascript How to get names and surnames from a text string with spaces and save them in a list in Python?

score 2 · Accepted Answer

You must use a adjacent selector ( + ) to choose the elements that are brothers of input . Something like this:

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

The problem with this selector is that it only looks for the sibling elements that are after the first selector (in this case div > input:focus ). To make it work as you want, it is necessary to modify the HTML, to put the li after input and then adjust it by CSS.

Something like this: link

For the case of the question, it would look like this:

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