Focus Textarea Using Css

I'm searching one javascript or html or css code that make change background color when i click in textarea i need something like this http://prntscr.com/bzsqgq I tried with javasc

Solution 1:

Add a wrapper and an inner element like this

.wrapper {
  display: inline-block;
  position: relative;
  padding: 20px;
}
input:focus ~ .inner,
textarea:focus ~ .inner {
  position: absolute;
  z-index: -1;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: yellow;
  border: 2px solid red;
  box-sizing: border-box;
}

<divclass="wrapper"><inputtype="text"><br/><br/><textarea></textarea><divclass="inner"></div></div>

Solution 2:

var element = document.getElementsByClassName("chg_parent_on_focus")[0]
var parent = element.parentElement
element.onfocus = function(){
  parent.className = "cont active";
}
element.onblur = function(){
  parent.className = "cont"; 
}

.cont{
 width:200px;
 background:red;
 padding:100px;
}
input{
  margin:10px;
  }
.cont.active{
 background:black;
}

<divclass="cont"><inputclass="chg_parent_on_focus"/></div>