CSS: Modifier le parent sur le focus de l'enfant

Disons que vous avez quelque chose comme:

<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

Je veux modifier l'apparence des parents/frères et sœurs, lorsque l'enfant reçoit le focus. Il n'existe aucun CSS astuces pour faire des trucs comme ça?

Edit:

La raison de ma question est comme suit:

Je suis Angulaire de la création d'un app qui doit les champs de texte modifiables. Il devrait ressembler à une étiquette jusqu'à ce qu'il est cliqué, à quel point il devrait ressembler à une normale de saisie de texte. J'style le champ de texte basé sur :se concentrer pour parvenir à cet effet, mais le texte est coupé par la saisie de texte limites. J'ai aussi utilisé ng-show, ng-hide, ng-flou, ng-keypress et ng-cliquez pour basculer entre l'étiquette et la saisie de texte basé sur les flous, des touches et de clics. Cela a bien fonctionné, sauf pour une chose: Après l'étiquette du ng-click="setEdit(ce, $event)" les changements de la modifier booléen utilisé par ng-show et ng-hide de vrai, il utilise jQuery appel .sélectionnez() l'entrée du texte. Cependant, il n'est pas jusqu'à après l'achèvement de la ng-cliquez sur que tout est $digest d, de sorte que la saisie de texte perd le focus. Depuis la saisie de texte n'a jamais véritablement reçoit le focus, à l'aide de ng-flou pour revenir à l'affichage de l'étiquette est buggé: L'utilisateur doit cliquer sur le bouton dans la saisie de texte, puis cliquez de nouveau pour revenir à l'affichage de l'étiquette.

Edit:

Voici un exemple plunk de la question: http://plnkr.co/edit/synSIP?p=preview

source d'informationauteur AaronF

  1. 38

    Vous pouvez désormais le faire en pure CSS donc pas de JavaScript est nécessaire.

    Le nouveau CSS pseudo-classe :focus-within voudrais de l'aide pour des cas comme cela et va aider à l'accessibilité lors de l'utilisation de personnes de tabulation pour naviguer, commune lors de l'utilisation de lecteurs d'écran.

    .parent:focus-within {
  border: 1px solid #000;
}

    L' :focus-au sein de la pseudo-classe correspond à des éléments qui eux-mêmes
    match :focus ou qui ont des descendants qui match :focus.

    Vous pouvez vérifier les navigateurs prennent en charge cette http://caniuse.com/#search=focus-within

  2. 5

    Il n'y a aucune chance de la façon de le faire avec les CSS. CSS peut seul style des frères et sœurs, les enfants, etc. pas les parents.

    Vous pouvez utiliser simplement JS comme ceci:

    <style>
.parent {background: green}
.focused {background: red;}
</style>
<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

<script>
$('.parent > *')
    .focus(function() {
        $('.parent').addClass('focused');
    })
    .blur(function() {
        $('.parent').removeClass('focused');
    });
</script>

    http://jsfiddle.net/C4bZ6/

    Ce code prend tous les enfants directs de .parent et si vous vous concentrez sur l'un d'eux, classe focused est ajouté à un parent. Sur le flou, cette classe est supprimée.

  3. 1

    Vous pouvez utiliser pur CSS pour faire de la saisie de texte ressembler ce n'est pas une saisie de texte, sauf si elle est dans le focus

    http://jsfiddle.net/michaelburtonray/C4bZ6/13/

    input[type="text"] {
    border-color: transparent;
    transition-duration: 600ms;
    cursor: pointer;
    outline-style: none;
    text-overflow: ellipsis;
}

input[type="text"]:focus {
    border-color: initial;
    cursor: auto;
    transition-duration: 300ms;
}
  4. 0

    Essayer le contenteditible attribut. Cela peut nécessiter plus de travail pour le transformer en une forme utilisable de données.

    http://jsfiddle.net/michaelburtonray/C4bZ6/20/

    <span class="parent" contenteditable>Click me</span>