使用:专注于外部div的风格？

Question

当我开始在textarea中编写文本时,我希望带有类框的外部div使其边框变为实线而不是虚线,但不知何故:在这种情况下焦点不适用.如果它适用于:活动,它怎么会不起作用:焦点？

有什么想法吗？

(注意.我希望DIV的边框变得坚固,而不是textareas)

div.box
{
    width: 300px;
    height: 300px;
    border: thin dashed black;
}

div.box:focus{
    border: thin solid black;
}

<div class="box">
    <textarea rows="10" cols="25"></textarea>
</div>

Answer 1

DIV如果设置tabindex属性,元素可以获得焦点.这是工作示例.

#focus-example > .extra {
  display: none;
}
#focus-example:focus > .extra {
  display: block;
}

<div id="focus-example" tabindex="0">
  <div>Focus me!</div>
  <div class="extra">Hooray!</div>
</div>

有关详细信息focus,并blur,你可以看看这篇文章.

更新: 这是另一个focus用于创建的示例menu.

#toggleMenu:focus {
  outline: none;
}
button:focus + .menu {
  display: block;
}
.menu {
  display: none;
}
.menu:focus {
  display: none;
}

<div id="toggleMenu" tabindex="0">
  <button type="button">Menu</button>
  <ul class="menu" tabindex="1">
    <li>Home</li>
    <li>About Me</li>
    <li>Contacts</li>
  </ul>
</div>

Answer 2

其他海报已经解释了为什么:focus伪类不够,但最后有一个基于CSS的标准解决方案.

CSS Selectors Level 4定义了一个新的伪类:

:焦点之内

来自MDN:

在:focus-withinCSS伪类匹配任何元素的:focus 伪类匹配或具有后代的:focus 伪类比赛.(这包括阴影树中的后代.)

所以现在使用:focus-within伪类 - 当textarea被点击时,外部div的样式变得微不足道.

.box:focus-within {
    border: thin solid black;
}

.box {
    width: 300px;
    height: 300px;
    border: 5px dashed red;
}

.box:focus-within {
    border: 5px solid green;
}

<p>The outer box border changes when the textarea gets focus.</p>
<div class="box">
    <textarea rows="10" cols="25"></textarea>
</div>

Codepen演示

NB: 浏览器支持:Chrome(60+),Firefox和Safari

Answer 3

虽然单靠CSS/HTML无法实现这一点,但可以通过JavaScript实现(不需要库):

var textareas = document.getElementsByTagName('textarea');

for (i=0;i<textareas.length;i++){
    // you can omit the 'if' if you want to style the parent node regardless of its
    // element type
    if (textareas[i].parentNode.tagName.toString().toLowerCase() == 'div') {
        textareas[i].onfocus = function(){
            this.parentNode.style.borderStyle = 'solid';
        }
        textareas[i].onblur = function(){
            this.parentNode.style.borderStyle = 'dashed';
        }
    }
}

JS小提琴演示.

顺便说一下,使用jQuery这样的库,上面的内容可以简化为:

$('textarea').focus(
    function(){
        $(this).parent('div').css('border-style','solid');
    }).blur(
    function(){
        $(this).parent('div').css('border-style','dashed');
    });

JS小提琴演示.

参考文献:

• getElementsByTagName().
• onfocus.
• onblur.
• parentNode.
• tagName.
• toString().
• toLowerCase().
• style.
• focus().
• blur().
• parent().
• css().

Answer 4

聚焦于内部

.box:focus-within {
  background: cyan;
}

在这里阅读更多内容

Answer 5

现在，可以通过本文:focus-within中举例说明的css方法来实现：http : //www.scottohara.me/blog/2017/05/14/focus-within.html

/*
  A normal (though ugly) focus
  pseudo-class.  Any element that
  can receive focus within the
  .my-element parent will receive
  a yellow background.
*/
.my-element *:focus {
  background: yellow !important;
  color: #000;
}

/*
  The :focus-within pseudo-class
  will NOT style the elements within
  the .my-element selector, like the
  normal :focus above, but will
  style the .my-element container
  when its focusable children
  receive focus.
*/
.my-element:focus-within {
  outline: 3px solid #333;
}

<div class="my-element">
  <p>A paragraph</p>
  <p>
    <a href="http://scottohara.me">
      My Website
    </a>
  </p>

  <label for="wut_email">
    Your email:
  </label>
  <input type="email" id="wut_email" />
</div>