css如何设置input的placeholder样式

得知此事须躬行

已于 2022-09-03 10:26:21 修改

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发 css 文章标签： css css3 前端

于 2022-06-18 17:20:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_17355709/article/details/125349478

前端开发同时被 2 个专栏收录

58 篇文章

订阅专栏

css

15 篇文章

订阅专栏

本文介绍了两种设置酒店名称输入框placeholder样式的方案：方式1使用内联样式定义，方式2为针对不同浏览器的全局CSS选择器。同时探讨了如何确保在多种环境下保持一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式1：

<input
      type="text"
      placeholder="请输入酒店名称"
      placeholder-class="placeholderStyle "
      v-model="invitation.hotelName"
      :disabled="!edit"
    />

以上代码只要申明placeholderStyle的样式即可：

<style>
.placeholderStyle {
      font-size: 30rpx;
      color: #efcc72;
    }
</style>

方式2，这个方法比较野，有些环境下还不一定生效：

    input[placeholder], [placeholder], *[placeholder] {
		color: #ffffff;
		font-size: 18px;
	}
	input::input-placeholder{
		color: #ffffff;
		font-size: 18px;
	}
	input::-webkit-input-placeholder { /* WebKit browsers */
	  color: #ffffff;
	  font-size: 18px;
	}
	 
	input::-moz-placeholder { /* Mozilla Firefox 19+ */
	  color: #ffffff;
	  font-size: 18px;
	}
	 
	input::-ms-input-placeholder { /* Internet Explorer 10+ */
	  color: #ffffff;
	  font-size: 18px;
	}