Modifying a form label text with JS using only the "for" attribute as a selector

Question

I have access to a form that I need to modify a labels text. I can only add JS to the page otherwise I'd just change the HTML or even replace the text with CSS.

To make matters worse the label doesn't have an ID or NAME other than it's "for" attribute.

<label for='camper1Grade' class="control-label required">Grade entering, Fall 2020</label>

If I could just edit the CSS I would do this:

   <style>
    label[for=camper1Grade]:before {content: "Grade completing, Spring 2020";}
    label[for=camper1Grade] { font-size: 0px;}
    label[for=camper1Grade]:after { content: "*";color: red;}
    </style>

But like I mentioned I can't add CSS directly.

I'm a pretty good CSS coder but know very little about JS. I'm sure there is a solution I just can't find a good explanation of how to do this. Thanks in advance to anyone who has an idea.

CertainPerformance · Accepted Answer · 2019-11-25 23:43:50Z

4

Almost all elements you can select with CSS you can also select with Javascript and querySelector. Unfortunately, ::before and ::after psuedo-elements are not among them. But, you can always inject another stylesheet using Javascript:

document.body.appendChild(document.createElement('style')).textContent = `
    label[for=camper1Grade]::before { content: "Grade completing, Spring 2020"; }
    label[for=camper1Grade] { font-size: 0px; }
    label[for=camper1Grade]::after { content: "*"; color: red;}
`;

(note the two colons, which is the standard for CSS3)

answered Nov 25, 2019 at 23:43

CertainPerformance

374k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Over a year ago

Thanks that totally worked. Once I figured out how to get the function to run - I'm really really bad with JS and Jquery - I really need to study up on it more.

Collectives™ on Stack Overflow

Modifying a form label text with JS using only the "for" attribute as a selector

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related