Html 输入元素焦点、悬停和填充在所有浏览器中都不起作用

我现在正在设计一个联系人表单。我只是希望表单的轮廓在活动时变为红色，而在悬停时不会发生任何事情

除了Internet Explorer，我在所有浏览器中都可以使用它。我正在Windows 7上使用Internet Explorer 11

在IE中，目前有一个默认的悬停，我无法理解，当点击输入元素时，轮廓颜色不会改变

另一个问题是，我在输入中应用了左边的填充，这样占位符和用户的文本都不会触及边缘。出于某种原因，这推动了整个输入范围的扩大。它确实具有最大宽度：100%应用于它。包含表单的div的两侧有填充，现在输入被推入到填充中。这在所有浏览器中都会发生

以下是基本示例：

代码如下：

HTML:

对此，我们将不胜感激

---

谢谢。

为了避免输入字段被忽略，您可以应用百分比填充，即1.5%，并将输入宽度设置为100%减去1.5%98.5%，或者必须在输入本身上使用css框大小：边框框。 要使大纲处于焦点，必须指定大纲样式

input {
 width: 100%;
 height: 3em;
 padding-left: 1em;
 box-sizing: border-box;
    &:focus {
        outline-style: dotted;
        outline-color: red; 
    }
  }

#contactForm{
    box-sizing: border-box;
    width: 100%;
    max-width: 64em;
    margin: 0 auto;
    padding: 0 1.25em;   
} 

input {
     width: 100%;
     height: 3em;
     padding-left: 1em;
     &:focus {
         outline-color: red;
     }
     &:hover {
         outline-color: none;
     }
 }

input {
 width: 100%;
 height: 3em;
 padding-left: 1em;
 box-sizing: border-box;
    &:focus {
        outline-style: dotted;
        outline-color: red; 
    }
  }