Is there a way to set a CSS style to a label of a specific input type?

Question

I have the following style set for labels of a particular form:

#incidentForm label {
    font-weight:bold;
    width:40%;
    vertical-align:top;
}

Which is exactly what I want for my full page form. But for the modal that allows one to update a single field from a report where someone would view the data results, I would like the label for the TEXTAREA ONLY to NOT be limited to the "width:40%". All other input types should keep the "width:40%".

I've been trying to wrap my brain around how to either do a :NOT exception to the existing label style, or somehow set a separate style based on the class of the modal. I.E.:

.updateModal label(that somehow identifies only textareas) {
    width:100%;
}

Here is an example of the structure of the update modal itself:

<div id="Return" class="updateModal">
  <div id="incidentForm">
    <div class="[name of this incident form type]">
      <form class="AjaxForm" action="https://blahblahblah" method="post">
        <fieldset id="fs1">
          <legend>Edit report field</legend>
          <div class="field">
            <label for="31">This is the label for this text area field:</label>
            <textarea id="31" name="31"></textarea>
          </div>
        </fieldset>
        <input value="Update record" type="submit">
      </form>
    </div>
  </div>
</div>

Please note that the id for the textarea and, thus the label for it, are generated dynamically based on the id field of the database the form information is pulled from. All of the field information is stored in a db so I would not be able to generate a specific style definition based on the id of the specific textarea itself. Or at least not that I can think of.

Does anyone have any suggestions?

Thank you very much!

Who or what is deciding which markup to use? That is, who/what is deciding that a field should be, an `input` or a `textarea`? Seems to me you should be able to add a class to any `label` that is being used for a `textarea`. If the backend code is using database info to decide on the element to use then you use that logic to add the class then, otherwise add it yourself when you write the HTML. — hungerstar, Jun 09 '17 at 19:37
Interesting thought. So you're saying, as the form is being autogenerated from the field information retrieved from the db, if the field is a textarea, add a class to the label as the HTML is being generated. Am I understanding correctly? It would have to differentiate between being generated for the full page form or the modal div when it is generating the HTML... but that might be possible. I'll take a look into that possibility. Thank you for the suggestion. — Tam, Jun 09 '17 at 20:07
Yes, you are understanding correctly. The backend script should be able to know which form it's generating (I'm assuming they're separate database queries). If so, knowing when to apply the class should be simple. — hungerstar, Jun 09 '17 at 20:30
Brilliant! Can you please submit your response as an answer so I can mark it as the correct solution and give you the appropriate credit? I will then explain how I used this information to not only solve my problem, but also open my form up to further customization. — Tam, Jun 09 '17 at 21:44

Jay Patel · Answer 1 · 2017-06-09T19:50:49.350

5

The selector should be like

label[for=xxx]
{
    /* ...definitions here... */
}

For multiple, you can make your selector simpler and generalize for modern browsers:

label[for^="3"] {
    color: red; //It will apply to all label that starts with "3"
}

Or Simply you can write:

label[for="31"],label[for="32"],label[for="and so on.."] {
    color: red;
}

Or For General Label Simply write

label {
    color: red; //It will affect to all the label in the page
}

edited Jun 09 '17 at 19:50

answered Jun 09 '17 at 19:30

Jay Patel

2,341
2
22
43

What about multiple/different `for` attribute values? OP noted that `for` values are take generated from database so there will be a different value for each form field/input. – hungerstar Jun 09 '17 at 19:36
What if you don't know what the values for `for` will be? Seems like a lot of heartache to write all those label selectors. – hungerstar Jun 09 '17 at 19:46
Right, hungerstar. That's why I specified that these are auto generated from database queries. I wouldn't know which number to script for each field id number from the db and as new forms are created, I would have to manually add those to the stylesheet by id number. Thank you for your response anyway, Jay. But this will not work for me. – Tam Jun 09 '17 at 20:01

score 1 · Answer 2 · answered Jun 09 '17 at 22:26

With CSS, the subject of the selector is the last compound selector of the entire selector (https://www.w3.org/TR/selectors4/#subject). In CSS4, there is a new subject selector that will allow this. It looks like: label! + textarea. The ! means that the label selector is the subject of this selector.

Unfortunately, this is not yet implemented in any browsers (http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/). Given that, we only have the ability to look for descendants, children, and younger siblings.

If you have some ability to control your HTML, this gives us a possibility: if we flip the DOM order of the form element and label, then the label becomes the younger sibling of the textarea. This gives us the option of using the adjacent + selector. The visual ordering can be altered by using a reverse-column flexbox. Consider:

<div class="field">
  <textarea id="f1">My textarea</textarea>
  <label for="f1">My Label</label>
</div>
<div class="field">
  <input type="text">
  <label for="f1">My Label</label>
</div>

.field {
  display: flex;
  flex-direction: column-reverse;
  margin: 1em;
}

textarea + label {
  background: #faa;
}

Demo: https://codepen.io/honzie/pen/weMRam

To summarize: (1) Is it possible in CSS2.1/3? Not with the current HTML. (2) Is it possible with CSS4 (assuming browsers implement it and the spec doesn't change)? Yes, in the future.

score 0 · Answer 3 · answered Jun 09 '17 at 19:28

0

You can use the following to select and attribute of an element:

input[type="text"] {
    background-color: yellow;
}

answered Jun 09 '17 at 19:28

Tony

2,890
1
24
35

score 0 · Accepted Answer · answered Jun 09 '17 at 21:58

0

Although I don't have any code to work with, if provide some I'll try to include it, it seems to me you should be able to add a CSS class to any label that is being used for a textarea. If backend code is using database info to decide on the element to use for a form field then you can use that logic to add the class, otherwise add it yourself when you write the HTML.

answered Jun 09 '17 at 21:58

hungerstar

21,206
6
50
59

Thank you, hungerstar. This is exactly what I have done. As the form is being generated by the field information gathered from the database one of the bits of information is the field type. I then use that information to add a class="[field type]" to each label. I was going to only do it for the textarea labels and then decided to add the appropriate class to all labels as they are created. I then use my stylesheet to configure any specific changes to any label I want. Full customizability. Thanks again for pointing me in this direction. Sometimes the simplest solution is the most brilliant! – Tam Jun 16 '17 at 20:53

Is there a way to set a CSS style to a label of a specific input type?

4 Answers4