Aide :focus sur le style extérieur de la div?

Quand je commence l'écriture d'un texte dans le textarea, je veux que l'extérieur de la div, avec une classe de boîte, pour avoir de la frontière tourné solide à la place des pointillés, mais de toute façon l' :focus ne s'applique pas dans ce cas. Si cela fonctionne avec :active, comment se fait il ne fonctionne pas avec :focus?

Des idées pourquoi?

(Note. Je veux que le DIV de la frontière à son tour 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>

Il ne fonctionne pas avec l'accent parce que le DIV n'aura pas d'accent, seul le TextArea de la volonté. Je voudrais une image d'un DIV ne peut pas avoir le focus de toute façon comme c'est un non-sélectionnable par l'élément
Vous auriez besoin d'utiliser le JavaScript pour y parvenir; comme tout le div peut prendre le focus du textarea prendra immédiatement en arrière si il est cliqué. JS Fiddle démo; en cliquant à l'extérieur de la textarea va changer les frontières de la div, mais l'activation du textarea vole focus.

InformationsquelleAutor Weblurk | 2011-10-24

Bien que ce ne peut pas être réalisé avec du CSS/HTML seul, il peut être réalisé avec du JavaScript (sans besoin d'une 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.

Par ailleurs, avec une bibliothèque, comme jQuery, le ci-dessus pourraient être résumés ainsi:

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

JS Fiddle démo.

Références:

+1 pour la réponse (surtout celui qui n'a pas besoin de jQuery)
Pas le plus efficace de répondre avec l'introduction de l' :focus-dans le pseudo-élément!

InformationsquelleAutor David says reinstate Monica

66

DIV éléments peuvent obtenir si l'accent mis l' tabindex attribut. Voici l'exemple qui fonctionne.

CSS:
```
#focus-example > .extra {
  display: none;
}
#focus-example:focus > .extra {
  display: block;
}
```
HTML:
```
<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.

CSS:
```
#toggleMenu:focus {
  outline: none;
}
button:focus + .menu {
  display: block;
}
.menu {
  display: none;
}
.menu:focus {
  display: none;
}
```
HTML:
```
<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>
```
- J'ai inclus le code de ma réponse. Check it out.
- Est-ce de la croix-navigateur hack?
- Il fonctionne pour moi. Mozilla Firefox pour Ubuntu, ver. 49.0
- Il fonctionne lorsque vous n'avez pas d'entrée. Si vous cliquez sur la non-entrée dom dans le div, il fonctionne. Si vous cliquez sur l'entrée dom dans le div, l'entrée dom permettra de saisir vos événements de focus et de l'arrêt de la pop.
InformationsquelleAutor Karlen Kishmiryan
53

D'autres affiches ont déjà expliqué pourquoi la :focus pseudo-classe est insuffisant, mais enfin, il y a un CSS à base de solution standard.

CSS Sélecteurs de Niveau 4 définit un nouveau pseudo classe:

:focus-au sein de

De MDN:

La :focus-within CSS pseudo-classe correspond à tout élément que les :focus
la pseudo-classe correspond ou qui a un descendant que la :focus
la pseudo-classe de matchs. (Cela comprend les descendants dans l'ombre des arbres.)

Donc, maintenant, avec le :focus-within pseudo - classe style de la div extérieure lorsque le textarea obtient cliqué devient trivial.
```
.box:focus-within {
    border: thin solid black;
}
```
CSS:
```
.box {
    width: 300px;
    height: 300px;
    border: 5px dashed red;
}

.box:focus-within {
    border: 5px solid green;
}
```
HTML:
```
<p>The outer box border changes when the textarea gets focus.</p>
<div class="box">
    <textarea rows="10" cols="25"></textarea>
</div>
```
Codepen démo

NB: Prise En Charge Du Navigateur : Chrome (60+), Firefox et Safari
- Wow, n'avait pas conscience de tout cela n'existait, c'est un sélecteur de modificateur!
- incroyable réponse 🙂
- De loin la plus simple et la meilleure réponse. Ne savais pas ce sélecteur existait. Fonctionne sous Mozilla et google Chrome à partir de mes tests.
- Grand, son incroyable
- Je veux juste mentionner que le tabindex est encore nécessaire, quand il y a un mélange des éléments statiques (div, span, etc.), et d'entrée des éléments à l'intérieur que l'extérieur de la div, et l'accent contour est nécessaire, même si l'un des intérieurs les éléments statiques est cliqué.
InformationsquelleAutor Danield

Cela peut maintenant être obtenu par le biais de la méthode css :focus-within comme exemplifié dans ce post: http://www.scottohara.me/blog/2017/05/14/focus-within.html

CSS:

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

HTML:

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

InformationsquelleAutor Tekill

Simple utiliser JQuery.

JS:

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

CSS:

    .FormRow {
      padding: 10px;
    }

HTML:

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

Et plus de plus simple, ne pas utiliser jquery, il y a bel exemple, solution, par @DavidThomas ... ce qui est le point de chargement de jquery fichier env. 77-94kB pour quelque chose comme cela, et beaucoup plus...
si vous utilisez jQuery, c'est une excellente solution, plus robuste trop (croix-navigateur sans avoir à dépenser pour toujours de débogage sur les navigateurs que vous n'avez même pas accès à l'!)

InformationsquelleAutor Matthew Egan

Vous pouvez onglet entre les balises div. Il suffit d'ajouter un onglet index à la div. Il est préférable d'utiliser jQuery et CSS classes pour résoudre ce problème. Voici un exemple de travail testé sous IE, Firefox et Chrome (versions les plus Récentes... n'ai pas testé plus).

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

InformationsquelleAutor Thomas Vanderhoof

2

Comme par le spec:

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

La <div> n'accepte pas d'entrée, de sorte qu'il ne peut pas avoir :focus. En outre, le CSS ne permet pas de définir des styles sur un élément basé sur le ciblage de ses descendants. Donc vous ne pouvez pas vraiment faire cela, sauf si vous êtes prêt à utiliser JavaScript.
- Notez qu'un <div> pouvez obtenir le focus si vous définissez la contenteditable="true" attribut. Mais dans ce cas, ce n'est probablement pas la réponse.
InformationsquelleAutor Jon
0

Autant que je suis conscient de ce que vous avez à utiliser javascript pour voyager dans les dom.

Quelque chose comme ceci:
```
$("textarea:focus").parent().attr("border", "thin solid black");
```
vous aurez besoin des bibliothèques jQuery chargés.

InformationsquelleAutor CBRRacer

Vous devez vous connecter pour publier un commentaire.

:focus-au sein de