gpt4 book ai didi

css - 模仿 HTML5 表单验证默认样式

转载 作者:太空宇宙 更新时间:2023-11-03 19:03:10 26 4
gpt4 key购买 nike

我有一个包含所需文件的简单 HTML5 表单。当页面加载时,字段没有样式。当我单击必填字段,输入内容,然后删除我刚刚输入的文本并退出该字段时,它会在 Firefox 中的无效字段外显示粉红色框阴影。

现在我需要黄色框阴影,同时保留相同的行为。我就是这样做的:

在 HTML 中

<input name="email_address" id="email_address_uuid_479823574" type="email"
placeholder="ex. example@domain.com" title="Email address" required />

-------
-------

<input name="model_number" id="model_number_uuid_479823574" type="text"
placeholder="ex. oxpd-983s" title="Equipment model number" required />

在 CSS 中

input:required:invalid {box-shadow: 1px 2px 9px yellow};

结果:页面加载了所有带有黄色框阴影的字段!而是等待用户像默认行为一样在 onblur 和 onsubmit 上犯错误。

如何在不改变行为的情况下覆盖无效字段的默认框阴影?

最佳答案

尝试:

input:required:-moz-ui-invalid {box-shadow: 1px 2px 9px yellow};

参见 https://developer.mozilla.org/en/CSS/:invalid

关于css - 模仿 HTML5 表单验证默认样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11347612/

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