CSS target label based on for attribute and input class

Question

Is there any way to style the label if there is a class in input field. Please find my code below.

<div id="edit-cv-upload-ajax-wrapper"><div class="control-group form-type-managed-file form-item-cv-upload form-item">

  <label for="edit-cv-upload-upload" class="control-label">Upload CV <span class="form-required" title="This field is required.">*</span></label>

  <div class="controls"> 
     <div id="edit-cv-upload-upload" class="cv-upload form-managed-file"> 
       <input type="file" id="edit-cv-upload-upload" name="files[cv_upload]" size="22" class="form-file error">
       <button class="btn form-submit ajax-processed" id="edit-cv-upload-upload-button" name="cv_upload_upload_button" value="Upload" type="submit">Upload</button>
       <input type="hidden" name="cv_upload[fid]" value="0">
     </div>

     <p class="help-block">Files must be less than <strong>5 MB</strong></p>
 </div>
 </div>
</div>

Validation is giving error class for the input field. So I have to change the label colour if there is error class for input file field.

I tried with label[for=…] and its not working as the error class is coming after the validation. Please help

https://stackoverflow.com/questions/4388102/can-you-style-an-active-form-inputs-label-with-just-css is it works — Gopi Chand, Apr 26 '18 at 11:22
The input and its parent div are using the same`id`. A same `id` shouldn't be used multiple times as it is made to identify a single element. — Takit Isy, Apr 26 '18 at 11:28
I have already tried .form-file.error + label { color: #b94a48; }. But not working — Prajila V P, Apr 26 '18 at 11:48
Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — CBroe, Apr 26 '18 at 12:02
Absolutely impossible with that HTML structure. The input element would have to come _before_ the label in DOM order. (See mentioned duplicate for more details on that.) — CBroe, Apr 26 '18 at 12:02
Possible duplicate of [Can you style an active form input's label with just CSS](https://stackoverflow.com/questions/4388102/can-you-style-an-active-form-inputs-label-with-just-css) — DwB, Apr 26 '18 at 13:21

score 1 · Accepted Answer · answered Apr 26 '18 at 12:28

I suppose you can just check -after validation- which inputs have an error class and add some class to their corresponding label.

$('.your-form-class').find('.your-error-class').each(function(index,element){
    var id = $(element).attr('id');
    $("label[for='"+id+"']").addClass('label-error-class');
});

score 0 · Answer 2 · answered Apr 26 '18 at 11:58

0

I guess you want something like below:

if($('#edit-cv-upload-upload).hasClass('errorClass')){ $('label').addClass('redColor'); }

CSS:

.redColor{
   color: 'red'
}

answered Apr 26 '18 at 11:58

Sree Nath

471
5
17

CSS target label based on for attribute and input class

2 Answers2