web-dev-qa-db-fra.com

Utilisation de: focus to style outer div?

Lorsque je commence à écrire du texte dans la zone de texte, je souhaite que la bordure externe, avec une boîte de classe, affiche une bordure solide au lieu d'être pointillée, mais le focus ne s'applique pas dans ce cas. Si cela fonctionne avec: actif, comment se fait-il que cela ne fonctionne pas avec: focus?

Des idées pourquoi?

(Remarque. Je veux que la bordure de la DIV devienne solide, PAS les 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>
cssfocusstylesheet
55
Weblurk

Bien que cela ne puisse pas être réalisé avec CSS/HTML seul, cela peut être réalisé avec JavaScript (sans nécessiter de bibliothèque):

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 démo .

Incidemment, avec une bibliothèque, telle que jQuery, ce qui précède pourrait être condensé comme suit:

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

JS Fiddle démo .

Les références:

35
David Thomas

Les éléments DIV peuvent être activés si vous définissez l'attribut tabindex. Voici l'exemple de travail.

#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>

Pour plus d'informations sur focus et blur, vous pouvez consulter cet article .

Mise à jour: Et voici un autre exemple d'utilisation de focus pour créer un 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>
62
Karlen Kishmiryan

D'autres afficheurs ont déjà expliqué pourquoi la pseudo-classe :focus Est insuffisante, mais il existe enfin une solution standard basée sur CSS.

CSS Selectors Level 4 définit une nouvelle pseudo classe:

: focus-inside

De MDN :

La pseudo-classe CSS :focus-within Correspond à tout élément associé à la pseudo-classe :focus Ou ayant un descendant correspondant à la pseudo-classe :focus. (Cela inclut les descendants dans les arbres d'ombre.)

Alors maintenant, avec la pseudo classe :focus-within, Le style de la division externe lorsque le clic sur textarea devient trivial.

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

démo de Codepen

NB: Support du navigateur : Chrome (60+), Firefox et Safari

47
Danield

Ceci peut maintenant être réalisé par la méthode css :focus-within _ comme expliqué dans cet article: 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>
4
Tekill

Utilisation simple 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>
3
Matthew Egan

Selon la spécification :

Le :focus pseudo-classe s'applique lorsqu'un élément a le focus (accepte les événements de clavier ou d'autres formes de saisie de texte).

Le <div> n'accepte pas les entrées et ne peut donc pas avoir :focus. De plus, CSS ne vous permet pas de définir des styles sur un élément en ciblant ses descendants. Donc, vous ne pouvez pas vraiment faire cela, sauf si vous êtes prêt à utiliser JavaScript.

2
Jon

Vous pouvez taper entre les balises div. Ajoutez simplement un index de tabulation à la div. Il est préférable d'utiliser les classes jQuery et CSS pour résoudre ce problème. Voici un exemple de travail testé dans IE, Firefox et Chrome (Les dernières versions ... n'ont pas été testés plus tôt)).

<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
Thomas Vanderhoof

Autant que je sache, vous devez utiliser javascript pour parcourir le royaume.

Quelque chose comme ça:

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

vous aurez également besoin des bibliothèques jQuery chargées.

0
CBRRacer