Änderung font-family of Label

Bitte überprüfen Sie diese Geige my fiddle (der Code hier ist nur ein Roh-Code, meine eigentliche Code einige Bootstrap-Klassen hat)Änderung font-family of Label

was ich versuche, hier zu erreichen, ist, dass, wenn Benutzer klickt auf ein Eingabefeld ändert sich die Schriftfamilie.

Aber leider funktioniert es nur, wenn das Etikett nach der Eingabe ist. Ich sah in vielen anderen Antworten in SO, es wird erwähnt, dass es keine CSS-Möglichkeit gibt, auf ein vorhergehendes Element zuzugreifen. so ist es trotzdem das font-family des Etiketts für die ersten beiden Felder in den unten

<html> 
 

 
<head> 
 
    <style> 
 
    input:focus+label { 
 
     font-family: 'Roboto Medium', sans-serif; 
 
     font-size: 16px; 
 
     color: #000; 
 
     font-weight: 500; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <form> 
 
    <div> 
 
     <label for="name">username</label> 
 
     <input type="text" name="name"> 
 
    </div> 
 
    <div> 
 
     <label for="email">email</label> 
 
     <input type="email" name="email"> 
 
    </div> 
 

 
    <br><br> 
 
    <input type="text" name="color"> 
 
    <label for="color">your fav color</label> 
 
    </form> 
 
</body> 
 

 
</html>

Quelle

2017-06-01 Bijay Singh

Die einfachste wäre sie im Markup zu tauschen und dann schweben die label ‚s

links

diese Weise werden die Geschwister-Selektor + arbeiten, da die input vor dem label im Markup ist

.swap label { 
 
    float: left; 
 
} 
 

 
input:focus+label { 
 
    font-family: 'Roboto Medium', sans-serif; 
 
    font-size: 16px; 
 
    color: #000; 
 
    font-weight: 500; 
 
}

<form> 
 
    <div class="swap"> 
 
    <input type="text" name="name"> 
 
    <label for="name">username</label> 
 
    </div> 
 
    <div class="swap"> 
 
    <input type="email" name="email"> 
 
    <label for="email">email</label> 
 
    </div> 
 

 
    <br> 
 
    <br> 
 
    <input type="text" name="color"> 
 
    <label for="color">your fav color</label> 
 
</form>

Sie können auch absolute Position, eine Polsterung und dann setzen label ein bove ..

.swap { 
 
    position: relative; 
 
    padding-top: 20px; 
 
} 
 
.swap + .swap { 
 
    margin-top: 5px; 
 
} 
 
.swap label { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
input:focus+label { 
 
    font-family: 'Roboto Medium', sans-serif; 
 
    font-size: 16px; 
 
    color: #000; 
 
    font-weight: 500; 
 
}

<form> 
 
    <div class="swap"> 
 
    <input type="text" name="name"> 
 
    <label for="name">username</label> 
 
    </div> 
 
    <div class="swap"> 
 
    <input type="email" name="email"> 
 
    <label for="email">email</label> 
 
    </div> 
 

 
    <br> 
 
    <br> 
 
    <input type="text" name="color"> 
 
    <label for="color">your fav color</label> 
 
</form>

.or

.swap { 
 
    position: relative; 
 
    padding-left: 80px; 
 
} 
 
.swap + .swap { 
 
    margin-top: 5px; 
 
} 
 
.swap label { 
 
    position: absolute; 
 
    left: 0; 
 
} 
 

 
input:focus+label { 
 
    font-family: 'Roboto Medium', sans-serif; 
 
    font-size: 16px; 
 
    color: #000; 
 
    font-weight: 500; 
 
}

<form> 
 
    <div class="swap"> 
 
    <input type="text" name="name"> 
 
    <label for="name">username</label> 
 
    </div> 
 
    <div class="swap"> 
 
    <input type="email" name="email"> 
 
    <label for="email">email</label> 
 
    </div> 
 

 
    <br> 
 
    <br> 
 
    <input type="text" name="color"> 
 
    <label for="color">your fav color</label> 
 
</form>

Quelle

2017-06-01 11:04:19 LGSon

Es leider in css kein Vorgänger Selektor zu ändern. Diese kann getan werden, wenn Sie Browser zielen, die Flexbox unterstützen - siehe diesen

HTML

<form> 
     <div class="some-container"> 
      <input type="text" name="name"> 
      <label for="name">username</label> 
     </div> 
     <div class="some-container"> 
      <input type="email" name="email"> 
      <label for="email">email</label> 
     </div> 

     <br><br> 
      <input type="text" name="color"> 
      <label for="color">your fav color</label> 
     </form>

CSS

.some-container { 
      display: flex; 
     align-items:center 
     } 
     .some-container label { 
      order: 1; 
     margin-right:10px; 
     } 
     .some-container input { 
      order: 2; 
     width:200px; 
     } 
     .some-container input:focus + label { 
      font-family: 'Roboto Medium', sans-serif; 
     font-size: 16px; 
      color: #000; 
      font-weight: 500; 
     }

https://jsfiddle.net/nithincharly/j96cnas2/

Quelle

2017-06-01 09:50:04

für Ihre Antwort Danke links, das funktioniert gut für mich, aber ich fürchte, ich don verstehe nicht, dass das hinzufügen von display: flex und order geholfen hat. Wenn es nicht zu viel verlangt ist, können Sie mich bitte auf einen Link verweisen oder auf diesen –

überprüfen Sie diesen Link .https: //css-tricks.com/almanac/properties/o/order/ –

Sie können ein früheres Element des Fokus in CSS .. kann mit JavaScript bearbeitet werden.

Quelle

2017-06-01 10:03:03

Änderung font-family of Label

Antwort

Verwandte Themen