it-swarm.com.de

CSS: Eltern über Fokus des Kindes ändern

Nehmen wir an, 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 für solche Dinge?

Bearbeiten:

Der Grund für meine Frage lautet wie folgt:

Ich erstelle eine Angular-App, die bearbeitbare Textfelder benötigt. Es sollte wie ein Etikett aussehen, bis es angeklickt wird. Dann sollte es wie eine normale Texteingabe aussehen. Ich habe das Textfeld auf der Grundlage von: fokussiert, um diesen Effekt zu erzielen, der Text wird jedoch durch die Grenzen der Texteingabe abgeschnitten. Ich habe auch ng-show, ng-hide, ng-blur, ng-keypress und ng-click verwendet, um zwischen der Beschriftung und der Texteingabe basierend auf Unschärfen, Tastendrücken und Klicks umzuschalten. Dies funktionierte bis auf eine Sache gut: Nachdem ng-click = "setEdit ($ $ event)" des Labels den von ng-show und ng-hide verwendeten booleschen Bearbeitungswert in true geändert hat, verwendet es einen jQuery-Aufruf von .select (). die Texteingabe. Es ist jedoch erst nach Abschluss des ng-clicks, dass alles $ digest'd ist, so dass die Texteingabe wieder den Fokus verliert. Da die Texteingabe nie wirklich den Fokus erhält, ist die Verwendung von ng-blur zum Anzeigen der Bezeichnung des Labels fehlerhaft: Der Benutzer muss in die Texteingabe klicken und dann erneut darauf klicken, um zur Anzeige des Labels zurückzukehren.

Bearbeiten:

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

26
AaronF

Sie können dies jetzt in reinem CSS ausführen, sodass kein JavaScript erforderlich ist.

Die neue CSS-Pseudoklasse :focus-within würde in solchen Fällen hilfreich sein und die Zugänglichkeit erleichtern, wenn Benutzer Tab-Tabs zum Navigieren verwenden, was bei Bildschirmlesegeräten üblich ist.

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

Die: focus-within-Pseudoklasse stimmt mit Elementen überein, die entweder Übereinstimmung: Fokus oder Nachkommen, die übereinstimmen: Fokus.

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


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 type="email" 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>

68
J J B

Es gibt keine Chance, wie man das mit CSS macht. CSS kann nur Geschwister, Kinder usw. formatieren, nicht 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/

Mit diesem Code werden alle direkten untergeordneten Elemente von .parent übernommen. Wenn Sie sich auf eines davon konzentrieren, wird die Klasse focused dem übergeordneten Element hinzugefügt. Bei Unschärfe wird diese Klasse entfernt.

5
panther

Sie können reines CSS verwenden, um die Texteingabe so aussehen zu lassen, als wäre sie keine Texteingabe

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

Versuchen Sie das contenteditible-Attribut. Dies kann jedoch mehr Arbeit erfordern, um es in verwertbare Formdaten umzuwandeln.

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

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