Использование: фокус для стилизации внешнего div? - PullRequest
Новая
       2

Использование: фокус для стилизации внешнего div?

54 голосов
/ 24 октября 2011

Когда я начинаю писать текст в текстовой области, я хочу, чтобы внешний 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>

Ответы [ 8 ]

62 голосов
/ 20 июня 2013

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>
47 голосов
/ 09 июля 2017

Другие авторы уже объяснили, почему псевдокласс :focus недостаточен, но, наконец, существует стандартное решение на основе CSS.

Селекторы CSS уровня 4 определяют новый псевдокласс:

: фокус в пределах

От MDN :

CSS-псевдокласс :focus-within соответствует любому элементу, который соответствует псевдоклассу :focus, или имеет потомок, которому соответствует псевдокласс :focus.(Это включает потомков в теневых деревьях.)

Так что теперь с псевдоклассом :focus-within - стилизация внешнего div при нажатии на textarea становится тривиальной. 

.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

Примечание: БраузерПоддержка : Chrome (60+), Firefox и Safari

35 голосов
/ 24 октября 2011

Хотя это не может быть достигнуто только с помощью 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 .

Ссылки:

4 голосов
/ 20 октября 2017

Теперь это можно сделать с помощью метода css :focus-within, как показано в этом посте: 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>
3 голосов
/ 13 ноября 2014

Простое использование JQuery. 

$(document).ready(function() {
  $("div .FormRow").focusin(function() {
    $(this).css("background-color", "#FFFFCC");
    $(this).css("border", "3px solid #555");
  });
  $("div .FormRow").focusout(function() {
    $(this).css("background-color", "#FFFFFF");
    $(this).css("border", "0px solid #555");
  });
});
    .FormRow {
      padding: 10px;
    }
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <div style="border: 0px solid black;padding:10px;">
    <div class="FormRow">
      First Name:
      <input type="text">
      <br>
    </div>
    <div class="FormRow">
      Last Name:
      <input type="text">
    </div>
  </div>

  <ul>
    <li><strong><em>Click an input field to get focus.</em></strong>
    </li>
    <li><strong><em>Click outside an input field to lose focus.</em></strong>
    </li>
  </ul>
</body>

</html>
2 голосов
/ 03 мая 2012

Вы можете вкладывать между тегами div.Просто добавьте индекс вкладки в div.Для решения этой проблемы лучше всего использовать классы jQuery и CSS.Вот рабочий пример, протестированный в IE, Firefox и Chrome (последние версии ... не тестировали старые). 

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            var divParentIdFocus;
            var divParentIdUnfocus = null;

            $(document).ready(function() {              

                    $("div").focus(function() {
                        //$(this).attr("class", "highlight");
                        var curDivId = $(this).attr("id");

                        // This Check needs to be performed when/if div regains focus
                        // from child element.
                        if (divParentIdFocus != curDivId){
                            divParentIdUnfocus = divParentIdFocus;
                            divParentIdFocus = curDivId;
                            refreshHighlight();
                        }

                        divParentIdFocus = curDivId;
                    });


                    $("textarea").focus(function(){
                        var curDivId = $(this).closest("div").attr("id");

                        if(divParentIdFocus != curDivId){
                            divParentIdUnfocus = divParentIdFocus;
                            divParentIdFocus = curDivId;
                            refreshHighlight();
                        }
                    });

                    $("#div1").focus();
            });

            function refreshHighlight()
            {
                if(divParentIdUnfocus != null){
                    $("#" +divParentIdUnfocus).attr("class", "noHighlight");
                    divParentIdUnfocus = null;
                }

                $("#" + divParentIdFocus).attr("class", "highlight");
            }
        </script>
        <style type="text/css">
            .highlight{
                background-color:blue;
                border: 3px solid black;
                font-weight:bold;
                color: white;
            }
            .noHighlight{           
            }
            div, h1,textarea, select { outline: none; }

        </style>
    <head>
    <body>
        <div id = "div1" tabindex="100">
            <h1>Div 1</h1> <br />
            <textarea rows="2" cols="25" tabindex="101">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="102">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="103">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="104">~Your Text Here~</textarea> <br />
        </div>
        <div id = "div2" tabindex="200">
            <h1>Div 2</h1> <br />
            <textarea rows="2" cols="25" tabindex="201">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="202">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="203">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="204">~Your Text Here~</textarea> <br />
        </div>
        <div id = "div3" tabindex="300">
            <h1>Div 3</h1> <br />
            <textarea rows="2" cols="25" tabindex="301">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="302">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="303">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="304">~Your Text Here~</textarea> <br />
        </div>
        <div id = "div4" tabindex="400">
            <h1>Div 4</h1> <br />
            <textarea rows="2" cols="25" tabindex="401">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="402">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="403">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="404">~Your Text Here~</textarea> <br />
        </div>      
    </body>
</html>
2 голосов
/ 24 октября 2011

Согласно спецификации :

Псевдокласс :focus применяется, когда элемент имеет фокус (принимает события клавиатуры или другие формы ввода текста).

<div> не принимает ввод, поэтому он не может иметь :focus.Кроме того, CSS не позволяет вам устанавливать стили для элемента на основе ориентации на его потомков.Так что вы не сможете сделать это, если не захотите использовать JavaScript.

0 голосов
/ 24 октября 2011

Насколько я знаю, вы должны использовать javascript для перемещения по домену.

Примерно так: 

$("textarea:focus").parent().attr("border", "thin solid black");

вам также понадобятся загруженные библиотеки jQuery.

...