CODEWITHSUNDEEP
htmlcss
Sumaiya
Sumaiya

Reputation: 33

Change color of span on focus of input in another span

I need to change the background color of a span using css when an input field in another span is focused. 

<p class="some">
<span class="one">Name</span> 
<span class="two"> <input type="text" name="fname"> </span>
</p>

Here is the css:

.one
 { background-color: red; }

I tried doing this:

.two:focus + .one
 {background-color-black;}

but its not working.

Any help would be appreciated. Thanks!

Upvotes: 3

Views: 2031

Answers (4)

MA Deldari
MA Deldari

Reputation: 358

you can use :focus-within, It worked for me.

This is a document https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

.one { float: left; }
input { margin: 0 0 0 5px; }
.some:focus-within .one { background: red; }
<p class="some">
<span class="one">Name</span> 
<span class="two"> <input type="text" name="fname"> </span>
</p>

Upvotes: 1

zelanix
zelanix

Reputation: 3562

Another javascript solution, using classes, and also handles the input loosing focus:

function getFocus() {
    var one = document.getElementsByClassName("one")[0];
    one.className = one.className + " one-focused";
}

function looseFocus() {
    var one = document.getElementsByClassName("one")[0];
    one.className = one.className.replace("one-focused", "");
}
.one { background-color: red; }
.one-focused { background-color: black; }
<p class="some">
<span class="one">Name</span> 
<span class="two"> <input type="text" name="fname" onfocus="getFocus()"  onblur="looseFocus()"> </span>
</p>

This has some fairly obvious flaws, but works in this case. You may want to loop through all classes, or use id's instead of classes. If you are using jQuery then this becomes slightly simpler, but I have left this using standard javascript and only changing the background of the first element in the document.

Upvotes: 0

Pragatheeswaran
Pragatheeswaran

Reputation: 120

Using javascript:

Html:

<p class="some">
<span class="one">Name</span> 
<span class="two"> <input type="text" name="fname" onfocus="changeColor()"> </span>
</p>

Javascript: 

<script type="text/javascript">
 function changeColor() {
  document.getElementsByClassName("one")[0].style.backgroundColor="black";
 }
</script>

Css:

.one
 { background-color: red; }

Upvotes: 0

Ilya B.
Ilya B.

Reputation: 956

If you do not mind elements order, try this snippet: 

.one { float: left; }
input[name="fname"] { margin: 0 0 0 5px; }
input[name="fname"]:focus + .one { background: khaki; }
<p class="some">
  <input type="text" name="fname"/>
  <span class="one">Name</span> 
</p>

Here is a fiddle

Upvotes: 0

Related Questions