html - 输入元素的焦点，悬停和填充在所有浏览器中均不起作用

我现在有一个正在设计的联系表格。我只是希望表单的轮廓在激活时变为红色，而将鼠标悬停时什么也不发生。

我可以在Internet Explorer以外的所有浏览器中使用此功能。我在Windows 7上使用Internet Explorer 11。

在IE中，目前有一个默认的悬停按钮，我无法弄清楚，单击输入元素时，轮廓颜色不会更改。

另一个问题是我在输入中应用了padding-left，以便占位符和用户文本都不会碰到边缘。由于某些原因，这使整个输入超出了应有的范围。它确实已应用了max-width: 100%。包含表单的div两侧都有填充，现在输入被压入填充。在所有浏览器中都会发生这种情况。

这是基本示例：http://jsfiddle.net/Forresty/fr7Lz2wj/1/

这是代码：

HTML：

<div id="contactForm">
    <input type="text" name="name" id="name" placeholder="Your Name" required maxlength="65" tabindex="1">
</div>

SCSS：

#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;
     }
 }

任何帮助，将不胜感激。

谢谢。

最佳答案

为避免输入字段过大，您可以应用百分比填充（即1.5％）并将输入宽度设置为100％减去1.5％（98.5％），或者必须在输入上使用css box-sizing：border-box本身。
要使轮廓成为焦点，您必须指定轮廓样式。

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

http://jsfiddle.net/fr7Lz2wj/5/