CSS: Ändern Sie den Elternteil auf den Fokus des Kindes

75

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

AaronF
quelle
Javascript ist keine Option?
Andi
1
Dies kann nicht nur mit CSS erfolgen, Sie müssen js verwenden.
Tushar
Es ist, aber ich war neugierig, ob es mit Styling gemacht werden kann. Ich werde eine Bearbeitung hinzufügen, um den Grund für meine Frage zu ermitteln.
AaronF
1
Der übergeordnete Abgleich kann nicht nur mit CSS durchgeführt werden. Der Abgleich von Geschwistern kann nur durchgeführt werden, wenn das Element neben dem definierenden Element liegt. Siehe developer.mozilla.org/en-US/docs/Web/CSS/…
haim770
siehe diese stackoverflow.com/questions/14402514/… es ist das gleiche Problem
MickyScion

Antworten:

214

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>

JJB
quelle
18
ernsthaft erstaunlich!
Jamie Carter
3
IE sollte weggeworfen werden. RIP
Mike Aron
Hier ist die Browser-Unterstützung: caniuse.com/#search=focus-within
Anurag Hazra
whopps! habe es nicht bemerkt. Es tut uns leid.
Anurag Hazra
@ AnuragHazra Kein Problem. Ich habe den Beitrag aktualisiert, um ihn jetzt klarer zu gestalten und ein Bild der Browser-Support-Tabelle aufzunehmen.
JJB
5

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.

pavel
quelle
Danke für deine Antwort. Ich habe eine Änderung bezüglich des Grunds für meine Frage hinzugefügt: Ich wollte zwischen der Beschriftung und der Eingabe für Fokus / Unschärfe wechseln und hatte einige Probleme bei der Ausführung in Angular.
AaronF
Dies ist nicht Vanilla JS, sondern verwendet jQuery.
MrVanilla
1

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;
}
Michael
quelle
Vielen Dank. Ich habe das tatsächlich versucht, bin aber auf einige Probleme gestoßen: "... Ich habe das Textfeld basierend auf: Fokus gestaltet, um diesen Effekt zu erzielen, aber der Text wird durch die Grenzen der Texteingabe abgeschnitten ...". Das Anzeigen einer Ellipse ist definitiv besser als das Ausschneiden, aber ich würde das Ganze gerne sehen, wenn möglich. Eine verwandte Frage, die ich gerade gestellt habe, ist hier: stackoverflow.com/questions/24289266/… , wenn Sie interessiert sind.
AaronF
1

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>
Michael
quelle
1
Nützlich, um sicher zu sein. Leider erfordert unser Kundenstamm die Verwendung von nicht HTML5-kompatiblen Browsern.
AaronF