input元素中placeholder属性内容水平居中

最新推荐文章于 2025-08-29 17:11:56 发布

原创最新推荐文章于 2025-08-29 17:11:56 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#input #css

css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种在HTML中实现输入框占位符文本居中的方法，通过使用CSS伪元素选择器，可以针对不同浏览器进行适配，确保在多种环境下都能保持良好的视觉效果。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo实例</title>
    <style>
       .input1::-ms-input-placeholder {
            text-align: center;
        }
 
       .input1::-webkit-input-placeholder {
            text-align: center;
        }
    </style>
</head>
<body>
<input type="text" placeholder="请输入内容..."/>
<input type="text" class="input1" placeholder="请输入内容..."/>
<input type="text" placeholder="请输入内容..."/>
</body>
</html>