悬停和聚焦伪类动作

Question

我正在试验css，我正在尝试在我的选择器中添加动态伪类。这是HTML - 标记摘录。

<div id="child">
    <input type="text" id="text"/>
</div>

并且它是相应的css - 样式

input[type="text"]{
    width: 150px;
    height: 25px;
}
input[type="text"]:hover, input[type="text"]:focus{
    border: 1px solid grey;
}
#child{
    padding: 5px;
    border: 20px solid;
    background: aqua;
    height: 50px;
    margin: 10px;
}

以下是JSFIDDLE示例。因此，当鼠标悬停在text元素上时，文本元素的大小将减少如下：

有谁知道为什么会出现尺寸减小的原因？

Answer 1

现在在您的代码中发生的事情是，您已将输入字段的宽度和高度分别设置为150px和25px。现在，当您向其添加 1px边框时将减少输入字段的内部（白色）部分，以保持所述的宽度和高度（150px和25px）。要解决此问题，您可以在悬停时向宽度和高度添加2px。小提琴： http://jsfiddle.net/z78BN/6

input[type="text"]:hover, input[type="text"]:focus{
   width: 152px;
   height: 27px;
   border: 1px solid grey;
}

Answer 2

那是因为两个东西大纲和伪3d默认边框的输入。 添加

input[type="text"]{
    border: 1px solid aqua;
}

input[type="text"]:focus{
   outline:none;
}