关于给inputdiv添加hover样式，边框变大后里面的文字移动问题-解决办法

Posted yunke

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于给inputdiv添加hover样式，边框变大后里面的文字移动问题-解决办法相关的知识，希望对你有一定的参考价值。

<style>
        div {
            width: 200px;
            height: 30px;  
        }
        input {
            width: 200px;
            height: 30px;
            border: 1px solid #ccc;
            font-size: 12px;
            line-height: 24px;
        }
        input:hover {
            border: 2px solid #d9d9d9;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" placeholder="电话号">
    </div>
</body>

</html>

这样写，鼠标移上去后input里的文字就会移动

解决办法，给要增大边框先预留一个空间，可以input添加一个padding：1px;  然后鼠标以上去在设置为0，input:hover{padding:0px}; 

以上是关于关于给inputdiv添加hover样式，边框变大后里面的文字移动问题-解决办法的主要内容，如果未能解决你的问题，请参考以下文章

css 当中如何实现一个元素的hover, focus 状态改变其他元素的样式

关于样式选择器:hover出现忽闪现象

CSS 鼠标经过边框变色

关于bootstrap--表格（tr的各种样式）

CSS给元素添加边框（样式颜色宽度）

CSS给元素添加边框（样式颜色宽度）