Css 使用：focus 设置外部 div 的样式

发布于10月24日

当我开始在文本区域中编写文本时，我希望带有类框的外部div将其边框变为实线而不是虚线，但不知何故:Focus在这种情况下并不适用.如果它可以与:Active一起工作，为什么它不能与:Focus一起工作呢？

知道为什么吗？

(注意，我希望DIV的边框变为实心，而不是文本区域)

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>

推荐答案

虽然单靠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 Fiddle demo

顺便说一句，使用jQuery这样的库，上面的内容可以压缩为:

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

JS Fiddle demo美元.

参考资料: