You are viewing limited content. For full access, please sign in.

Question

Question

Change label on the built in comment

Version 11 Forms
Updated September 6
asked on September 5 • Show version history

We use the following CSS to change the label in the built in comment box. However if comment box is required then it makes the text red and does not show the asterix(*)

.form-container #comment-container label::after {
  content: "Reason for Return";
  visibility: visible;
  margin-left: -5.5em;
}

.form-container #comment-container label {
  visibility: hidden;
}

 

Does anyone know of a way to keep the "Reason for Return" black and not remove the red asterix? 

0 0

Answer

SELECTED ANSWER
replied on September 6

Try this:  

.form-container #comment-container label {
  font-size: 0; /* hides original label text without affecting layout */
  position: relative;
  display: inline-block;
}

.form-container #comment-container label::before {
  content: "Reason for Return";
  color: black;
  font-size: 1rem;
  margin-right: 0.2em;
  position: relative;
}

.form-container #comment-container label::after {
  content: "*";
  color: red;
  font-size: 1rem;
  margin-left: 0.2em;
  position: relative;
}

 

2 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...