更改所有出现的字符的颜色 javascript/reactjs

Question

I am working with reactjs have a form with multiple input fields and some of them have labels with an asterisk to indicate that the field is mandatory. I want to change the color of all the asterisks(*) to red for better visibility to the user. How can I change the color of all occurrences of the asterisk in my form to red at once?

PS : I don't want to put the asterisk in a span or a div. Rather I would like to write code so that every asterisk in the form gets the color red with a single piece of global code.

Answer 1

You should wrap asterisks in span element and assign some class. So you can give color to that class element in your css file.

Like this

<span class="required">*</span>

And in CSS

.required
{
   color:red;
}

Answer 2

It's rather unclear what exactly you're trying to accomplish without having any code to reference. But I'm assuming what you're actually trying to highlight the asterisks (*) belonging to labels for fields that are empty during form-submission.

Try something like this: https://codesandbox.io/s/holy-leftpad-hw1oe

class App extends React.Component {
  state = {
    name: "",
    password: "",
    errors: false
  };

  handleOnChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  handleOnSubmit = event => {
    event.preventDefault();
    const { name, password } = this.state;
    if (name.length === 0 || password.length === 0) {
      this.setState({
        errors: true
      });
    } else {
      this.setState({
        errors: false
      });
    }
  };

  render() {
    const { name, password, errors } = this.state;
    return (
      <form onSubmit={this.handleOnSubmit}>
        <label>
          Name{" "}
          <span
            className={errors && name.length === 0 ? "error-label" : "label"}
          >
            (*)
          </span>
        </label>
        <input name="name" onChange={this.handleOnChange} />
        <label>
          Password
          <span
            className={
              errors && password.length === 0 ? "error-label" : "label"
            }
          >
            (*)
          </span>
        </label>
        <input name="password" onChange={this.handleOnChange} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}