动态CSS变量
等级： 初级
CSS变量是一种强大的工具，它允许开发人员将一个符号名称与一个值关联起来，然后在样式表中任何需要该值的地方使用这个名称。优点是，当需要更改该值时，只需在CSS变量定义中更改即可，而无需在许多地方进行更改。
更强大的是，可以在运行时动态更改CSS变量的值。
本应用的目标是动态更改文本框的背景颜色，以便让您在使用CSS变量和从应用内部动态更改它们的过程中获得经验。
用户故事
- [ ] 用户可以看到三个文本框，用于输入用户ID和密码，以及它们下方的'取消'和'登录'按钮。文本框的默认背景颜色为白色。
- [ ] 用户可以将用户ID和密码输入到文本框中。
- [ ] 用户可以点击'登录'按钮来验证用户ID和密码。
- [ ] 如果文本框中有一个或两个包含空格，则会显示警告消息，并且空文本框的背景颜色将更改为浅黄色。
- [ ] 如果用户ID与'testuser'不匹配，则会显示警告消息，并且文本框的背景颜色将更改为浅红色。
- [ ] 如果密码与'mypassword'不匹配，则会显示警告消息，并且文本框的背景颜色将更改为浅红色。
- [ ] 用户可以点击'取消'按钮来清除文本框，并将其背景颜色重置为白色。
额外功能
- [ ] 当检测到错误时，可以查看文本框边框的颜色发生变化。
- [ ] 当检测到错误时，可以查看文本框内容的大小和字体发生变化。