CSS-Fokus auf Kindelement ändern ein Elternelement

Question

Ich möchte ein Formular mit der Bezeichnung und Eingabe in das Formularfeld formatieren, und wenn ich etwas in die Eingabe schreiben werde (wahrscheinlich mit Fokus), möchte ich die Grenzen zu beleuchten mit etwas Blau. Jetzt habe ich so etwas wie dieses:

HTML

<div class="login-form-field"> 
    <label for="email" class="login-form-label">Email:</label> 
    <input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email"> 
</div> 

CSS

.login-form-input{ 
    margin-left: 20px; 
    width: 90%; 
    outline: none; 
    border: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: 0 0 0px 1000px white inset; 
} 
.login-form-label { 
    font-size: 13px; 
    font-weight: 300; 
    padding-left: 20px; 
} 
.login-form-field{ 
    width: 100%; 
    border-radius: 0px; 
    height: 6rem; 
    border: 0.5px solid grey; 
    box-shadow: 0px 0px 0px; 
} 

ich schon versucht, die Eltern zu haben einige Veränderungen und andere Sachen, die ich auf Google gefunden zu wählen. Das nächste, was ich bekam, war, mit blau zu markieren, wenn der Mouse über war: hover, aber ich brauche die Farbe, um zu bleiben, wie ich mit der gewählten Eingabe bin.

.login-form-field:hover { 
    border-color: blue !important; 
} 

Hier ist die JSFiddle, wenn jemand ich dankbar wäre helfen könnte!

Answer 1

Reagieren mit jquery:

$(document).ready(function() { 
    console.log("ready!"); 

    $('.login-form-input').focus(function() { 
     $(this).parent().css("border", "#99f 2px solid"); 
    }); 

    $('.login-form-input').focusout(function() { 
     $(this).parent().css("border", ""); 
    }); 

}); 

Answer 2

wenn Sie die Rahmenfarbe geben, wenn der Eingang aktiv ist Sie wie folgt hinzufügen:

.login-form-input:focus { 
    border:1px solid blue; 
} 

Answer 3

CSS hat keine native Unterstützung für Eltern Auswahl. Wenn Ihr Ziel ist .login-form-field haben einen blauen Rand auf focus Sie müssen sich auf JavaScript verlassen, um die jeweiligen CSS hinzuzufügen.

Die folgenden CSS:

.login-form-field.highlight { 
    border-color: blue; 
} 

Mit dem folgenden jQuery

$('.login-form-field').hover(function() { 
    $(this).toggleClass('highlight'); 
}); 

Würde dieses Ziel erreichen. Ich sollte beachten, dass jQuery hier sicherlich nicht notwendig ist; Es ist genau das, was ich am liebsten verwende.

Answer 4

Sie können dies tun, wo Sie eine zusätzliche div, absolut positioniert, die als Grenze dient, ... und kein Skript erforderlich ist.

.login-form-input { 
 
    margin-left: 20px; 
 
    width: 90%; 
 
    outline: none; 
 
} 
 

 
.login-form-label { 
 
    font-size: 13px; 
 
    font-weight: 300; 
 
    padding-left: 20px; 
 
} 
 

 
.login-form-field { 
 
    position: relative; 
 
    width: 100%; 
 
    border-radius: 0px; 
 
    height: 6rem; 
 
    box-shadow: 0px 0px 0px; 
 
} 
 
.login-form-field input ~ .login-form-field-border { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    border: 0.5px solid grey; 
 
    z-index: -1 
 
} 
 
.login-form-field input:focus ~ .login-form-field-border { 
 
    border: 2px solid blue; 
 
}

<div class="login-form-field"> 
 
    <label for="email" class="login-form-label">Email:</label> 
 
    <input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email"> 
 
    <div class="login-form-field-border"></div> 
 
</div>

Answer 5

Sie jetzt dieses in reiner CSS tun können, so ist kein JavaScript benötigt. Die neue CSS-Pseudo-Klasse :focus-within würde in solchen Fällen hilfreich sein und hilft bei der Barrierefreiheit, wenn Benutzer Tabbing zum Navigieren verwenden, was häufig bei der Verwendung von Bildschirmleseprogrammen der Fall ist.

.login-form-field:focus-within { 
    border-color: blue !important; 
} 

---

Die: Fokus-in pseudo-Klasse Elemente übereinstimmt, entweder selbst Spiel: Fokus oder das haben Nachkommen welche Partie: Fokus.

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