gpt4 book ai didi

html - 使用外部 .css 文件返回 html 的条件格式

转载 作者:行者123 更新时间:2023-11-28 16:56:50 24 4
gpt4 key购买 nike

我有一个 html 文件,通过在表单框中输入信息(即姓名、电子邮件地址、年龄)来询问用户信息。当这些字段为空白时,它们应该用红色边框突出显示。

如果我将以下 css 样式代码放在 html 页面中,突出显示会起作用。但是,如果我将它存储在外部 css 页面中,突出显示将不起作用。

以下有效,但第二组在外部 css 文件中无效。

<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
input:invalid {
border: 2px dashed red;
}

input:valid {
border: 2px solid black;
}
</style>
</head>
<style>
input:invalid {
border: 2px dashed red;
}

input:valid {
border: 2px solid black;
}
</style>

我将如何从 css 文件中获取样式,或者甚至可能吗?

最佳答案

另一种方法是在发布时向输入字段添加类 .valid.invalid 以表示字段的有效性。这也将避免您在使用原始方法时可能遇到的任何特异性问题。

input.invalid {
border: 2px dashed red;
}

input.valid {
border: 2px solid black;
}
<input class="invalid" type="text" name="name" placeholder="Invalid" />
<input class="valid" type="text" name="name" placeholder="Valid" />

关于html - 使用外部 .css 文件返回 html 的条件格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56256859/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com