我遇到了一个盒子及其相关的CSS大纲样式的问题.当盒子聚焦时,它应该有一个蓝色轮廓(工作).在表单验证时,如果出现问题,则添加.error类,将轮廓和背景颜色改为红色(不工作)
关注焦点我有一个风格：
input,select {
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
}
input:focus{
background: #EFF5FF;
color: black;
outline: solid 2px #73A6FF;
}
对于错误：
input.error:focus,.error {
outline: 2px solid red;
background: rgb(255,240,240);
}
问题是没有焦点的轮廓位于输入框的外部,而焦点上的轮廓位于框的内部,因此元素在您单击时跳转(CHROME).
请看这个图像：
首先是焦点,第二是没有焦点的错误,第三是焦点错误.注意无焦点如何导致边框在对象外扩展.
有没有好办法解决这个问题？
解决方法
尝试明确设置
outline-offset.任何有效的(参见语法部分)值都应该这样做,但是为了在元素内部移动轮廓,可以应用负数,例如：
input {
background: #EFF5FF;
outline: solid 2px #73A6FF;
outline-offset: -2px;
}
input.error {
outline: 2px solid red;
background: rgb(255,240);
}
