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

    How to make a sudoku grid using HTML and CSS?

    PHP & CSS: How to get hover effect for each row of a table?

    How can I use a non-breaking space before an inline-block-default element, such as a

    How to give outer glow effect to column in HTML/CSS?

    How to style parent li elements of headers using CSS?

    How long can a webpage be?

    how to replace entire css text with another?

    How can align css colums vertcally to the bottom?

    How to align 2 divs inside one div container with CSS (see image)

    How To Add % Based Image To CSS? (for fluid layout)

    How to include display:block in css code that includes pseudo element 'before'

    How to replace cycle('float: left', 'float: right') to use pure css?

    How to add padding to a ul/li menu with a background image?

    Since KB2898785 IE6 doesn't load locally-sourced CSS for a page delivered remotely--how to correct?

    How to change the arrow color of ' select' in a form with CSS [duplicate]

    how to make a text ele to the right of a left floated ele automatically occupy the rest width?

    Can't figure out how to set color for specific div's in the loop

    How to build a responsive padding for list menus using CSS?

    How is CSS applied by the browser, and are repaints affected by it?

    how to get a grid of different sizes using css and javascipt

    How can I append the images from this JSON file properly into the correct divs

    How to speed up a slow loading PHP page that is processing several large arrays?

    How to break up an HTML List using CSS Only

    Show window inside any web page

    How do I split a WordPress theme into 2 columns?

    How to make inner div of Flexbox height of parent

    In CSS, how to grow the button + button image when the button is focused?

    How to use more times css transform property?

    How to increase height of footer's div when browser window is resized?

    how to make a span hold its position from an encroaching div