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/

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

1 个答案: