主页

css 实现在 input 输入框中给placeholder增加样式

2023-11-21 11:41AM

要给 input 输入框的 placeholder 增加样式,你可以使用CSS来实现。

1.使用伪类选择器(::placeholder)
可以使用CSS的伪类选择器 ::placeholder 来选择 input 元素的 placeholder 文本,并对其应用样式。可以在CSS中添加以下代码:

input::placeholder {
  color: red; /* 设置文本颜色 */
  font-style: italic; /* 设置字体样式 */
}

2. 使用类名
可以给 input 元素添加一个类名,然后使用该类名来定义 placeholder 的样式。

<template>
  <div>
    <input type="text" class="my-input" placeholder="请输入内容" />
  </div>
</template>

<style>
.my-input::placeholder {
  color: blue; /* 设置文本颜色 */
  font-weight: bold; /* 设置字体粗细 */
}
</style>

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论