Javascript html中的焦点表单不是蓝色的，我想要红色的

我的问题是，我无法创建如下图像所示的web表单：

如何创建一个焦点不是蓝色的窗体，就像这张照片一样，我只想用阴影更新为红色

 input:focus {

     outline-color: red;
}

---

表单的css中应该有：active属性。改变那里的颜色，你应该都准备好了。我能看一下代码吗？

为什么大纲很重要？我用了另一种方法，只需删除大纲并给出边框即可！“重要”用于强制元素获得此样式。在更新的答案和JSFIDLE中，我删除了这个选项，只更改了大纲颜色谢谢，但大纲有点粗体，边框是浅的边框是好的还是大纲？我喜欢这张照片有一点阴影，请再看一次照片CSS轮廓属性是一个令人困惑的属性。当您第一次了解它时，很难理解它与border属性有何不同。W3C将其解释为有以下区别：1.轮廓不占用空间。2.轮廓可能是非矩形的。激活一秒钟。然后再次释放鼠标，形成第一个焦点返回活动鼠标按钮，因为前者是我们最初的焦点释放时的表单请发布您尝试过的css和html代码。看见