我现在有一个正在设计的联系表格。我只是希望表单的轮廓在激活时变为红色,而将鼠标悬停时什么也不发生。
我可以在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/