it-swarm.com.de

umschalten der Formatvorlagen auf dem Etikett (Aktiv/Fokus) für Eingabefeld nur mit CSS

Ich frage mich, ob es eine css-only -Methode gibt, um die Stile auf der entsprechenden Beschriftung im Eingabefokus umzuschalten. Bisher habe ich:

    $(document).on('focus active', 'input',function(){
        $('label[for='+$(this).attr('id')+']').addClass('active');
    });
    $(document).on('blur', 'input',function(){
        $('label[for='+$(this).attr('id')+']').removeClass('active');
    });

HTML:

    <div class="row">
     <label for="contact_form_mail">Email</label>
     <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    </div>

Und CSS:

.active{ color:red; }

Edit: Ich bin mir sicher der "Workarounds" der Child- und Geschwister-Selektoren bewusst, aber das reine Anordnen von reinen Markups für das reine Styling scheint nicht richtig zu sein. Wenn es also einen anderen reinen CSS-Weg gibt, gewinnt diese Antwort!

http://jsfiddle.net/fchWj/3/

13
worenga

Gehen Sie folgendermaßen vor: - Platzieren Sie Ihr Etikett nach der Eingabe und lassen Sie es links liegen. Und wende Geschwister an.

Html

<div class="row">
    <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    <label for="contact_form_mail">Email</label>
</div>

CSS

label {
    float:left;
}
input:focus + label {
    color:red;
}

Demo

Dies ist ein Hack, um den benachbarten Geschwister-Selektor zum Laufen zu bringen, da er nur für das folgende Element gilt und nicht für das vorherige Element. ~ wählt alle benachbarten Geschwister nach diesem Element aus. Wenn Sie also für jeden Abschnitt der Eingaben unterschiedliche .row haben, verwenden Sie +.

16
PSL

Wenn Sie bereit sind, Elemente zu wechseln, dann sind Sie hier

Demo

<div>
    <input type="text" />
    <label for="e_mail">E-Mail</label>
</div>
label {
    float: left;
    margin-right: 5px;
}

input[type=text]:focus + label {
    color: red;
}

Erläuterung: Wir verwenden hier den benachbarten +-Selektor. Wenn das Textfeld fokussiert ist, wählen wir das Tag label aus und wenden die Farbe red an.

Hinweis: Vergessen Sie nicht, Schwimmer zu löschen;)

14
Mr. Alien

Dies ist nur mit CSS möglich, ohne die Reihenfolge von Label und Eingabe zu ändern. Sie können eine :focus-within-CSS-Pseudoklasse für das übergeordnete Element verwenden, die für Elemente gilt, die über ein untergeordnetes Element mit dem Fokus verfügen.

In Ihrem Beispiel könnten Sie Folgendes verwenden:

.row:focus-within label {
    color: red;
}

Beachten Sie, dass diese Pseudoklasse relativ neu ist. Sie wird also nur von modernen Browsern unterstützt. 

4
Johnny Fekete

Es gibt aber nur, wenn Sie das Label nach der Eingabe platzieren.

<input name="field" type="text" />
<label for="field">Label Here</label>

input:focus + label{
    color: red;
}

Wenn Sie nun möchten, dass die Beschriftung davor platziert wird, müssen Sie ein CSS-Styling mit absoluter Position vornehmen, um die Beschriftung vor dem Eingabefeld zu platzieren. Fügen Sie dann einen linken Rand in die Eingabe ein, um sie nach rechts zu verschieben.

<div>
    <input name="field" type="text" />
    <label for="field">Label Here</label>
</div>
div{
   position: relative;
}
input{
   margin-left: 40px;
}
label{
   position:absolute;
   left:0;
}
3
Ali Bassam

Zuerst können wir einen Selektor verwenden, der mit einer Beschriftung übereinstimmt, die unmittelbar auf das Eingabe-Tag folgt ( Eingabe: Fokus + Beschriftung ). Es besteht jedoch immer noch das Problem, dass die Beschriftung nach dem eigentlichen Eingabefeld folgt. Wenn Sie es oberhalb der Texteingabe haben möchten, müssen Sie die Positionen der Steuerelemente ändern. Dies kann mit einer CSS-Pseudo-Tabelle erfolgen. 

<div class="pseudo-table">
   <input id="yourname" name="yourname" type="text" placeholder="Name...">
   <label for="yourname">Name</label>
</div>

Der Stil für den künstlichen Tisch ist ...

.pseudo-table { display: table;  }

Damit können wir das Label umformen, z. zu einer Tabellenkopfgruppe :

label { display: table-header-group; }

und das Eingabefeld zu einer Tabellenzeilengruppe :

input { display: table-row-group; }

In Kombination mit unserem nachfolgenden Selector sind wir fertig und es sieht gut aus:

input:focus + label {
    color:red;
    font-weight: bold;
}

Eine Demo finden Sie hier Fiddle

HTH

2
hennson

Es gibt keinen Selektor für ein vorhergehendes Element ... Dies stimmt mit einer Beschriftung überein, die unmittelbar von einem Eingabe-Tag gefolgt wird. 

input:focus + label {
    color: red;
}
1
sjkm

Dadurch erhalten Sie eine Beschriftung über der Eingabe und markieren Sie diese während des Eingabefokus.
HTML

<div class="row">
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
<label for="contact_form_mail">Email</label>
</div>

<code>
.row{
    display:flex;
    flex-direction:column-reverse;
    align-self:flex-start;
 }
 .row input:focus{
     border: 1px solid red;
  }
  .row input:focus+label{
     color:red;
  }
  </code>
0
Li Zhen Wu