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

我可以在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/

09-30 18:59
查看更多