<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};