html - 输入元素焦点、悬停和填充在所有浏览器中均不正常

Question

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

我在除 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;
     }
 }

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

为避免输入字段超出您应用百分比填充(即 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/