javascript - 当输入字段在 React JS 中成为焦点时如何更改标签颜色

Question

你能告诉我当输入字段集中在 react js 中时如何更改标签颜色我正在使用 semantic UI

https://react.semantic-ui.com/collections/form/#types-form这是我的代码

<Form>
    <Form.Field>
      <label>First Name</label>
      <input placeholder="First Name" />
    </Form.Field>
    <Form.Field>
      <Checkbox label="I agree to the Terms and Conditions" />
    </Form.Field>
    <Button type="submit">Submit</Button>
  </Form>

https://codesandbox.io/s/semantic-ui-react-example-i6crv

Answer 1

您实际上可以使用 :focus-within CSS 选择器以轻松应用 CSS。

div:focus-within 当任何元素聚焦在您的 div 内时应用 CSS。在你的情况下，你可以给你的 input 组一个类——比方说 input-group。然后使用 .input-group:focus-within label 选择器来设置标签样式。

检查工作 code sandbox你的代码演示。

我所做的只是添加了以下样式表并且它起作用了。

.input-group:focus-within label {
  color: red !important;
}