使用 css 聚焦文本区域

Question

我正在搜索一个 javascript 或 html 或 css 代码，当我点击 textarea 时会更改背景颜色我需要类似 http://prntscr.com/bzsqgq

我尝试使用 javascript，但我无法做到这一点，我尝试使用 rgba 的 onclick 更改背景颜色，例如模糊。

$('.comment .body').on('click', function() {
    if($(this).hasClass('changing')) {
        $('.comment textarea').blur();
    }else {
        $('.comment textarea').focus();
    }

});


$('.comment textarea').on('focus',function() {
    $('.comment .body').addClass('changing').style('background-color: #FF0000;');
});         

$('.change-stamp textarea').on('blur',function() {
    $('.comment .body').removeClass('changing').text('background-color: transparent;');
});

谢谢谁能帮助我。

Answer 1

像这样添加wrapper 和inner 元素

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

<div class="wrapper">
  <input type="text">
  <br/>
  <br/>
  <textarea></textarea>
  <div class="inner"></div>
</div>

Answer 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;
}

<div class="cont">
  <input class="chg_parent_on_focus"/>
</div>