跳动探索网

💻前端小技巧 | 设置`<input>`标签placeholder的样式✨

导读 在网页开发中,``标签的placeholder属性能为用户提供输入提示,但默认的样式可能显得单调。如果想让它更美观,可以通过CSS轻松实现!👀首先...

在网页开发中,``标签的placeholder属性能为用户提供输入提示,但默认的样式可能显得单调。如果想让它更美观,可以通过CSS轻松实现!👀

首先,确保你的HTML结构正确:

```html

```

接着,用CSS来美化它👇

```css

input::placeholder {

color: 999; / 灰色文字 /

font-size: 14px;

opacity: 0.7; / 调整透明度 /

}

```

如果你想要更多变化,比如添加渐变效果或动画?可以试试伪元素组合:

```css

input::placeholder {

background: linear-gradient(90deg, ff6f61, ff9a8b);

-webkit-background-clip: text;

color: transparent;

animation: placeholderAnimate 2s infinite;

}

@keyframes placeholderAnimate {

0% { opacity: 0.5; }

50% { opacity: 1; }

100% { opacity: 0.5; }

}

```

通过这些方法,你的placeholder就能脱颖而出啦!🤩