How to change the color of a div in css when another one is on focus


Tags: javascript,html,css

Problem :

I want input1 to change the color to blue, when in is on focus. Why does this not work?

<div id="input1">input1:</div>
<input id="in">

css:

body {
    color: red;
}

#in:focus + #input1 {
    color: blue; 
}

I also created a jsfiddle



Solution :

You can do this by changing the html markup as follow.

Your selector #in:focus + #input1 { will not work because + will select next sibling.

#in:focus + #input1 will select the #input1 element that is next to #in element which is focused.

You can read more about adjacent sibling selector

Updated Fiddle

body {
  color: red;
}
#in:focus + #input1 {
  color: blue;
}
<input id="in">
<div id="input1">input1:</div>


As there is no previous sibling selector in CSS, you've to use Javascript.

Vanilla JS:

var input = document.getElementById('in'),
  div = document.getElementById('input1');

input.addEventListener('focus', function() {
  div.classList.add('focused');
}, false);

input.addEventListener('blur', function() {
  div.classList.remove('focused');
}, false);
body {
  color: red;
}
.focused {
  color: blue;
}
<div id="input1">input1:</div>
<input id="in">


If you're using jQuery

$('#in').on('focus', function() {
  $('#input1').addClass('focused');
}).on('blur', function() {
  $('#input1').removeClass('focused');
});
body {
  color: red;
}
.focused {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div id="input1">input1:</div>
<input id="in">


    CSS Howto..

    CSS - How to place div side by side with no space at left and right

    How to centre a
    within several other
    s (using a mixture of w3.css and css)

    How to position SVG with CSS?

    my website not worked in Ipad and how I can fix some small issue? [closed]

    How do I change gradient color of text inside the Jumbotron?

    small space keeps showing to right side of my website w

    CSS question how to make one div appear over another?

    How to add an image to a custom CSS button

    How to tooltip keep active using HTML and CSS or Jquery?

    how to align image and text when floating to image

    how to change css styles of custom jquery widget?

    How to center my navigation using .css

    How do I add hover cursor and still get move cursor on JQuery Table Sortable?

    How to pull css properties along with html content in Ajax?

    How to have two sections using 50% of the total height?

    How to view CSS/HTML in GUI?

    How to increase div width according to the text inside it?

    How to make rollover images in CSS using multiple image backgrounds and :hover pseudo

    how to make text transparent without changing to an image using css

    How to move CSS classes to the right html elements

    How to create a border gap illusion

    How to use body horizontal scrollbar in free jqgrid

    How can I Add sub menus to dropdown menus?

    how can you have layers see through each other on a web page

    Ruby Command Line: How can I send the CTRL-C command via text in the command line?

    how to stop only the hover pointer event in css

    how to get a rounded corner table with a body in different color with CSS?

    How to CSS: select element based on inner HTML

    How can I programmatically position multiple backgrounds using Sass/Compass?

    how to hide an image on css active in IE