Angenommen, Sie haben so etwas wie:

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

Ich möchte das Aussehen der Eltern / Geschwister ändern, wenn das Kind den Fokus erhält. Gibt es CSS-Tricks, um solche Dinge zu tun?

Bearbeiten:

Der Grund für meine Frage ist wie folgt:

Ich erstelle eine Angular-App, die bearbeitbare Textfelder benötigt. Es sollte wie eine Beschriftung aussehen, bis darauf geklickt wird. An diesem Punkt sollte es wie eine normale Texteingabe aussehen. Ich habe das Textfeld basierend auf: Fokus gestaltet, um diesen Effekt zu erzielen, aber der Text wird durch die Grenzen der Texteingabe abgeschnitten. Ich habe auch ng-show, ng-hide, ng-blur, ng-keypress und ng-click verwendet, um basierend auf Unschärfen, Tastendrücken und Klicks zwischen der Beschriftung und der Texteingabe zu wechseln. Dies hat bis auf eines gut funktioniert: Nachdem ng-click = "setEdit (this, $ event)" des Labels den von ng-show und ng-hide verwendeten Bearbeitungsbooleschen Wert in true geändert hat, wird ein jQuery-Aufruf von .select () verwendet. die Texteingabe. Erst nach Abschluss des ng-Klicks ist alles $ digest'd, sodass die Texteingabe wieder den Fokus verliert. Da die Texteingabe nie wirklich fokussiert wird,

Bearbeiten:

Hier ist ein Beispiel für das Problem: http://plnkr.co/edit/synSIP?p=preview

Sie können dies jetzt in reinem CSS tun, sodass kein JavaScript erforderlich ist 😁

Die neue CSS- :focus-withinPseudoklasse würde in solchen Fällen helfen und die Zugänglichkeit verbessern, wenn Benutzer Tabulatoren zum Navigieren verwenden, wie dies bei der Verwendung von Bildschirmleseprogrammen üblich ist.

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

Die Pseudoklasse: focus-inside stimmt mit Elementen überein, die entweder selbst mit: focus übereinstimmen oder deren Nachkommen übereinstimmen: focus.

Kann ich benutzen...

Sie können überprüfen, welche Browser dies unterstützen, indem Sie http://caniuse.com/#search=focus-within besuchen

Demo

fieldset {
  padding: 0 24px 24px !important;
}

fieldset legend {
  opacity: 0;
  padding: 0 8px;
  width: auto;
}

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

fieldset:focus-within legend {
  opacity: 1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <form>
    <fieldset>
      <legend>Parent Element</legend>
      <div class="form-group">
        <label for="name">Name:</label>
        <input class="form-control" id="name" placeholder="Enter name">
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    </fieldset>
  </form>
</div>

Es gibt keine Chance, wie man das mit CSS macht. CSS kann nur Geschwister, Kinder usw. stylen, keine Eltern.

Sie können einfach JS wie folgt verwenden:

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

Dieser Code nimmt alle direkten untergeordneten Elemente von .parentund wenn Sie eines davon fokussieren, wird die Klasse focuseddem übergeordneten Element hinzugefügt. Bei Unschärfe wird diese Klasse entfernt.

Sie können reines CSS verwenden, damit die Texteingabe so aussieht, als wäre sie keine Texteingabe, es sei denn, sie ist scharfgestellt

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

Probieren Sie das Attribut contenteditible aus. Dies kann jedoch mehr Arbeit erfordern, um daraus verwendbare Formulardaten zu machen.

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

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