使用javascript重置html所需样式

我有一个表单，它的输入属性设置为required。当我提交表单且输入为空时，表单周围会显示一个红色边框

我现在正在寻找一个javascript方法来删除这个，并将输入的显示重置为初始状态

重置并再次提交后，应再次检查输入，如果输入为空，则显示红色边框。因此，我认为将css设置为：required并不能提供所需的解决方案

用一把小提琴来说明我的问题：

jQuery（函数（）{
jQuery（“#重置”）。单击（函数（）{
//清除输入的红色边框
});
});

重置
编辑、更新

我想重新设置样式，而不是阻止它发生（当我不这样做时）
专注于它）

您可以将
className
添加到
#myinput
元素中，该元素将
框影
设置为
none
，并将
边框
设置为
继承
在
中单击
重置
元素。删除
myinput
元素上的
className
在
focus
或
change
事件，具体取决于您是否希望在
focus
上删除无效输入的
框影
和
边框
，或者在用户输入值时删除

.reset:-moz-ui-invalid:not(output) {
  box-shadow: none;
  border: 1px solid inherit;
}


提交时，会显示类似“此字段为必填项”的消息。这
当我取消焦点时被移除，但我正在寻找一个js方法来移除
这个信息

您可以使用
invalid
event、
.setCustomValidity（“”）
，并使用空格字符作为参数，在处理程序中调用
event.target


只有当
输入
获得焦点且输入无效时，才可以使用
css
:focus
，
:invalid
将
边框
设置为
红色
。在
html
中，如果输入值为空字符串或仅为空格字符，则可以使用
RegExp
\w+
添加
pattern
属性，将
输入设置为无效


jQuery（文档）.ready（函数（）{
jQuery（“#重置”）。单击（函数（）{
jQuery（“#myinput”）.addClass（“重置”）
});
jQuery（“#myinput”）.focus（函数（）{
jQuery（this）.removeClass（“重置”）
})
.on（“无效”，函数（e）{
e、 target.setCustomValidity（“”）；
})
})
#myinput:焦点：无效{
边框：1px纯红；
}
#我的输入：焦点{
大纲：无；
}
.reset:-moz ui无效：不（输出）{
盒影：无；
边框：1px实体继承；
}

重置
我无法在此处复制它。但您的问题可能是应用于输入的数据。

如果不能删除伪类，那么可能可以重写样式。比如：

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow:none;
}

如果您只需要在单击“重置”按钮时应用样式，请将样式添加到您自己的类中，并在需要时添加/删除该类
 如果您正在寻找CSS属性，那么
initial
关键字会使CSS属性采用浏览器的默认样式


jQuery（函数（）{
jQuery（“#重置”）。单击（函数（）{
//清除输入的红色边框
jQuery（'#myinput'）.css（'border-color'，'initial'）；
});
});

#我的输入{
边框颜色：红色；
}
重置
“当我提交表单且输入为空时，表单周围会显示一个红色边框。”红色边框如何应用于元素？在
css
，还是
js
？你能在问题中加入
css
，创建stacksnippets来演示吗？
input
元素是否应该具有
value
属性？@pomber-Firefox，我现在看到，在chrome中，当不聚焦时，边框会被删除。@guest271314红色边框会自动添加到Firefox中。这里没有比我放的更多的css或js。并且输入元素不应有值属性。您可以使用
css
：focus
，
：invalid
。“然而，我仍然在寻找一个js解决方案来删除消息”你说的“删除消息”是什么意思？@guest271314提交时，它会显示一条类似“此字段是必需的”的消息。这是删除时，我不集中，但我正在寻找一个js方法来删除该消息。谢谢你的建议，但这并没有做我要找的。我想重置样式，而不是阻止它发生（当我不关注它时）。@user4493177请参阅更新的帖子。在at
webkit
浏览器和夜间显示返回预期结果