使用CSS重点textarea [英] Focus textarea using css

问题描述

我正在寻找一个javascript或者html或css代码，当我点击textarea时改变背景颜色，我需要像这样的 http://prntscr.com/bzsqgq

我尝试过使用javascript，但我无法做到这一点，我试着用onclick改变背景颜色（'click'，function（）{$（'。comment .body'）。

b $ b if（$（this）.hasClass（'changing'））{
$（'。comment textarea'）。blur（）;
} else {
$（'。注释textarea'）。focus（）;
}

}）; $'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$' ）.style（'background-color：＃FF0000;'）;
}）; $（'。change-stamp textarea'）。on（'blur'，function（）{
$（'。comment .body'）。removeClass（'changing'）。 text（'background-color：transparent;'）;
}）;

感谢谁能帮助我。

解决方案

添加一个 wrapper 和一个内部元素像这样

.wrapper {display：inline-block;位置：相对; padding：20px;} input：focus〜.inner，textarea：focus〜.inner {position：absolute; z-index：-1;左：0; top：0;宽度：100％;身高：100％;背景：黄色;边框：2px纯红色; box-sizing：border-box;}

< div类= 包装 > < input type =text> <峰; br /> <峰; br /> < TextArea>< / textarea的> < div class =inner>< / div>< / div>

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 javascript but i can't do that its to hard, i tried onclick change background color with rgba something like blur.

$('.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;');
});

Thanks who can help me.

解决方案

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

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

这篇关于使用CSS重点textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！