时间戳

首页 > 解决方案 > 当输入字段在反应js中成为焦点时如何更改标签颜色

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

问题描述

当输入字段集中在我正在使用的反应 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

标签： javascriptreactjssemantic-ui

解决方案

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

div:focus-within当任何元素集中在您的 div 内时应用 CSS。在你的情况下，你可以给你的input小组上课——比如说input-group. 然后使用.input-group:focus-within label选择器为您的标签设置样式。

查看代码的工作代码沙盒演示。

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

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

推荐阅读