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

时间:2014-09-25 21:13:02

标签: html css css3

我有一个我正在造型的联系表格。我只是希望表格的轮廓在活动时变为红色,而在悬停时不会发生任何事情。

除了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 个答案:

答案 0 :(得分:0)

要避免输入字段重复,请应用百分比填充(即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/