设置input 中placeholder的样式

叶落无痕123

于 2024-04-18 15:39:08 发布

阅读量1.4k

点赞数

文章标签：前端 javascript html

原文链接：https://blog.csdn.net/longgeaisisi/article/details/82916310

版权

一、效果

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
            color: red;
        }
        ::-moz-placeholder { /* Firefox 19+ */  
            color: red;
        }
        :-ms-input-placeholder { /* IE 10+ */ 
         color: red;
        }
        :-moz-placeholder { /* Firefox 18- */ 
         color: red;
        }
    </style>
</head>
<body>
    名字：<input type="" name="" placeholder="我是一个测试">
</body>
</html>

三、HTML input placeholder支持的属性

font properties
color
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
opacity
eg1、
效果

代码：

input::-webkit-input-placeholder {
       padding-left:30px;
       opacity:0.5;
       }