перамыкаючы стылі на этыкетцы (актыўны/фокус) для поля ўводу з дапамогай CSS толькі

Здзіўленне Ці, калі ёсць <�моцны> CSS толькі спосаб выканаць для пераключэння стыляў на адпаведнай налепцы на фокус ўваходных ст. Да гэтага часу ў мяне ёсць:

    $(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">
     
     <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    </div>

І CSS:

.active{ color:red; }

Edit: I am surely aware of the child and sibling selectors "workarounds", but rearranging clean markup for the pure sake of styling seems not right, so if there is another pure CSS way this answer wins!

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

13
Я не думаю, што ёсць CSS-адзіны шлях.
дададзена аўтар Kees Sonnema, крыніца

7 адказы

Паспрабуйце так: - Змесціце пазнаку пасля ўводу і усплываюць яго налева. І ўжываць братоў і сясцёр.

Html

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

CSS

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

Demo

Гэта хак, каб атрымаць сумежную працу селектара роднаснага, як яно прымяняецца толькі на наступны элеменце, а не папярэднія. <�Код> ~ падбярэ ўсё adjascent братоў і сясцёр пасля гэтага элемента. Так што, калі вы маеце іншае .row для кожнай секцыі уваходаў выкарыстоўвайце + .

16
дададзена
Ха-ха Лол сапраўды .... :)
дададзена аўтар PSL, крыніца
Чувак мы сур'ёзна трэба абмеркаваць, перш чым адпраўляць адказы, лол
дададзена аўтар Mr. Alien, крыніца

Калі вы гатовыя перайсці элементы, чым тут вы ідзяце

<�моцны> Demo

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

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

Explanation: We are using + adjacent selector here, so when the textbox is focused, we select the label tag and apply color red

<�Р> Заўвага: Не забудзьцеся ачысціць паплаўкі;)
14
дададзена
+1 ваш, здаецца больш правільным ....
дададзена аўтар PSL, крыніца
Ды я зразумеў пазней, што, калі ОП мае большы ўклад + пазнакі ў тым жа .row
дададзена аўтар PSL, крыніца
@PSL Адзіным адрозненнем было тое ~ і + , але вы рэдагавалі, +1 к вам таксама :)
дададзена аўтар Mr. Alien, крыніца
@PSL Так, вы атрымалі яго зараз;)
дададзена аўтар Mr. Alien, крыніца

Існуе, але толькі калі вы змесціце пазнаку пасля ўводу.

<input name="field" type="text" />


input:focus + label{
    color: red;
}

Цяпер, калі вы хочаце ярлык быць змешчаны перад ім, то вам неабходна зрабіць некаторыя CSS стыль з пазіцыі абсалютнай, каб змясціць пазнаку перад полем уводу, а затым дадаць некаторы запас налева на ўваходзе, каб перанесьці яго направа.

<div>
    <input name="field" type="text" />
    
</div>
div{
   position: relative;
}
input{
   margin-left: 40px;
}
label{
   position:absolute;
   left:0;
}
3
дададзена

Гэта магчыма толькі з дапамогай CSS, без пераключэння парадку пазнакі і ўводу. Вы можаце выкарыстоўваць : фокус-в CSS псеўда-клас на бацькоўскі элемент, які ўжываецца да элементаў, які мае даччыны элемент з фокусам.

У вашым прыкладзе, вы можаце выкарыстоўваць наступнае:

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

Звярніце ўвагу, што гэты псеўда-клас з'яўляецца адносна новым, так што толькі сучасныя браўзэры падтрымліваюць яго.

3
дададзена

Па-першае, мы можам выкарыстоўваць селектар, адпаведны ярлык адразу пасля гэтага ўводу тэга ( ўваход: фокус + пазнака ). Але ёсць яшчэ праблема, што пазнака варта пасля фактычнага поля ўводу. Калі адзін хацеў бы мець яго над уводам тэксту нам трэба памяняць месцамі элементы кіравання. Гэта можа быць зроблена з дапамогай CSS псеўда-табліцы.

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

Стыль для штучнага табліцы ...

.pseudo-table { display: table;  }

Пры гэтым у месцы мы маглі б пераўтварыць пазнаку, напрыклад, да табліцы-загаловак-групе :

label { display: table-header-group; }

і поле ўводу ў табліцы-радкі-групы :

input { display: table-row-group; }

У спалучэнні з нашым наступным селектара мы зрабілі, і яна выглядае:

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

For a demo please see this Fiddle

НТН

2
дададзена
Як я ўжо згадваў у гэтым пытанні, я не хачу, каб змяніць разметку.
дададзена аўтар worenga, крыніца

Там няма селектара для адпаведнасці папярэдняга элемента ... Гэта адпавядае этыкетцы адразу пасля гэтага ўводу тэга.

input:focus + label {
    color: red;
}
1
дададзена
Вы не азначае, што пазнака непасрэдна вынікаюць ІНГАЎ ўваходных тэг?
дададзена аўтар Jonathan., крыніца
<�Код>: актыўны будзе няправільны выбар тут :)
дададзена аўтар Mr. Alien, крыніца

This give you label on top of input, highlight label while input focus.
HTML

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

</div>


.row{
    display:flex;
    flex-direction:column-reverse;
    align-self:flex-start;
 }
 .row input:focus{
     border: 1px solid red;
  }
  .row input:focus+label{
     color:red;
  }
  
0
дададзена